我有一個簡單的 HTML、一個父 div 和兩個孩子。當我將一個孩子float設定為正確的樣式時，下一個孩子會上升并且margin-top不適用于它，這是我不想要的。
這是示例代碼。
.inner1 {
width: 50%;
height: 100px;
border: 5px solid red;
float: right;
}<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>有人可以建議如何處理這種情況嗎？
這是
uj5u.com熱心網友回復：
不要使用float. float已棄用。請注意此解決方案，使用flex.
.outer {
width: 100%;
height: 100%;
display: flex;
flex-flow: row-reverse;
align-items: center;
}
.inner1 {
width: 50%;
height: 100px;
border: 5px solid red;
}
.inner2 {
width: 50%;
text-align: center;
}<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>片段#2
.outer {
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
align-items: flex-end;
}
.inner1 {
width: 50%;
height: 100px;
border: 5px solid red;
}
.inner2 {
width: 50%;
}<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>uj5u.com熱心網友回復：
試試這個代碼：
.outer{
display:flex;
flex-direction:column;
align-items:flex-end;
}
.inner1 {
width: 50%;
height: 100px;
border: 5px solid red;
}
.inner2{
width: 50%;
}<div class="outer">
<div class="inner1">
</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>uj5u.com熱心網友回復：
您可以clear: both;在元素中使用具有float: right;屬性的內容。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/447921.html
上一篇：更改復選框的顏色
下一篇：JQuery不讀取用戶輸入