CSS：底部對齊浮動div與百分比寬度

我想弄清楚正確的CSS垂直對齊兩個浮動的divs的底部彼此相鄰，如附圖所示。我想避免必須對div的寬度進行絕對定位，因爲標有「DIV.1」的div將包含文本，並且寬度將根據文本大小/長度而變化。實際上，如果可能的話，我想爲所有div使用基於百分比的寬度 - 標記爲「DIV.2」的DIV將包含圖片，並且該網站要做出響應，所以我想使用max-width和儘可能百分比。CSS：底部對齊浮動div與百分比寬度

感謝您的任何見解。

enter image description here

來源

2014-11-14 nickpish

你可以做到這一點的margin-top和浮見下面的CSS代碼。

Demo

CSS

.col1{ 
width:200px; 
height:600px; 
background-color:#093; 
position:relative; 
    float:left; 
} 
.col2{ 
width:200px; 
height:200px; 
margin-top:400px; 
background-color:red; 
position:relative; 
float:left;} 
}

來源

2014-11-14 00:22:54 Timothy

謝謝蒂莫西，唯一的事情是我寧願不必宣佈寬度/高度如果可能，正如我在我原來的帖子中提到的。 – nickpish

所以你想它響應？ – Timothy

響應式佈局一直是我的弱點。 – Timothy

幾個方法可以做到這一點：

使容器元素顯示：表並使用vertical alignment
使用底部：0將div與其容器的底部聯繫起來河只要它具有設定的尺寸，它就可以處理任何元素。
顯式設置上邊的例子的邊距，或者將它們設置爲百分比。
- 請注意，雖然在計算大小時，邊距使用的是元素的百分比，而不是父級。因此，一半的高度div會有邊距：100％，而不是您認爲的容器高度的50％。
在左邊的div中使用填充可以減少您的內容。這可能是最直接的，你不必亂用浮游物。確保你使用透明背景。

來源

2014-11-14 00:33:33 Ucinorn

謝謝湯姆;我會用你的方法配置一個小提琴並回報。 – nickpish

CSS：底部對齊浮動div與百分比寬度

回答

相關問題