CSS對齊2塊底部

我有2塊，red塊width: fixed height: auto，塊width和height fixed，我不知道如何使塊，這將是在底部，現在它的頂部; 可以看到例如：http://jsfiddle.net/MXqTY/3/CSS對齊2塊底部

來源

2012-10-22 Wizard

你希望div是一個在另一個之上，還是並排排列，但是在底部對齊？ –

補充一點：

.square1, .square2 { 
    display: inline-block; 
    vertical-align: bottom; 
}

和刪除float: left。

http://jsfiddle.net/thirtydot/MXqTY/8/

來源

2012-10-22 18:43:46 thirtydot

-3

對於.square2，添加：

margin-top:110px;

來源

2012-10-22 18:38:41

什麼時候向square1添加更多文本？ – Wizard

如果'square1'的高度改變，則使用頂部邊距將不起作用。 – JSW189

正確，但這並不是問題的一部分。 –

刪除浮動：從你的類聲明離開了。默認情況下，它們將堆疊。將這兩個元素都浮動到左邊將導致它們水平堆疊。

來源

2012-10-22 18:39:52 RhinoWalrus

加入clear:left;您.square2塊將解決您的問題。

#wrap{ 
 
margin: 0 auto; 
 
} 
 

 
.square1{ 
 
width: 100px; 
 
height: auto; 
 
background-color: red; 
 
float: left; 
 
} 
 
.square2{ 
 
width: 50px; 
 
height: 50px; 
 
background-color: green; 
 
float: left; 
 
clear:left; 
 
}

<body> 
 
<div id='wrap'> 
 

 
    <div class='square1'>tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas tekstas </div> 
 
    <div class='square2'></div> 
 

 
</div>

爲什麼你的綠色塊對準的其他浮動塊一起的原因是因爲浮子自動轉移的含元素內所指示的位置的所有元素。你可以看到這個定義here on MDN.

所有浮動的元素將排列在一起，直到它到達容器的末端，此時它將環繞到下一行。通過將clear添加到.square2的代碼塊中，您基本上會告訴它將移動到所有相關浮動的邊緣，在您的情況下它是第一個方形。

來源

2017-03-16 03:49:46

CSS對齊2塊底部

回答

相關問題