我在設定 div 右側的文本時遇到問題 它始終位于底部，而不是右側。這是我的代碼
.player-container {
position: relative;
text-align: right;
line-break: auto;
display: inline-block;
left: 0;
}
.player-container h1 {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
width: 60%;
}
.player-container .model {
padding-top: 3rem;
width: 700px;
height: 450px;
}
.player-about {
display: inline-block;
position: absolute;
right: 0;
}<div class="page-content">
<div class="player" label="END">
<div class="player-container">
<h1 class="username">END</h1>
<model-viewer class="model" src="assets/scene.gltf" alt="VR Headset" auto-rotate camera-controls ar
ios-src="assets/scene.gltf">
</model-viewer>
</div>
<p class="player_about"> text
</p>
</div>
</div>我的結果：
我想要的是：
如何在另一個 div 內的 div 右側顯示文本？有什么對我有用的解決方案嗎？
uj5u.com熱心網友回復：
您可以將樣式添加display:flex到player選擇器。喜歡下面，
.player {
display: flex;
}
uj5u.com熱心網友回復：
您在 html 和 css 中使用了不同的類（可能是<p>錯字player_about）player-about。
uj5u.com熱心網友回復：
或者，您可以display: flex通過添加.player選擇器來使用
.player-container {
position: relative;
text-align: right;
line-break: auto;
display: inline-block;
left: 0;
}
.player-container h1 {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
width: 60%;
}
.player-container .model {
padding-top: 3rem;
width: 700px;
height: 450px;
}
.player {
display: flex;
}<div class="page-content">
<div class="player" label="END">
<div class="player-container">
<h1 class="username">END</h1>
<model-viewer class="model" src="assets/scene.gltf" alt="VR Headset" auto-rotate camera-controls ar
ios-src="assets/scene.gltf">
</model-viewer>
</div>
<p class="player-about"> text
</p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/508196.html