CSS：底部对齐浮动div与百分比宽度

Question

我试图找出正确的CSS来垂直对齐彼此相邻浮动的两个div的底部，如附图所示。我想避免在宽度方面绝对定位div，因为div标记为＆＃34; DIV.1＆＃34;将包含文本，宽度将根据文本大小/长度而有所不同。事实上，如果可能的话，我想为所有div使用基于百分比的宽度--DIV标记为＆＃34; DIV.2＆＃34;将包含图片，网站将具有响应性，因此我希望尽可能使用max-width和百分比。

感谢您的任何见解。

Answer 1

有几种方法可以做到这一点：

• 使容器元素显示：table并使用vertical alignment

• 使用bottom：0将div绑定到其容器的底部。只要它具有设置尺寸，这适用于任何元素。

• 明确设置边距，如上例所示，或将其设置为百分比。

  • 请注意这一点，在计算大小时，边距使用元素的百分比，而不是父元素。因此，半高div将具有margin-top：100％，而不是容器高度的50％，如您所想。

• 在左侧div中使用填充，可以降低内容。这可能是最直接的，你不必乱用浮游物。确保使用透明背景。

Answer 2

你可以使用margin-top和float来查看下面的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;}
}