CSS：具有百分比宽度的底部对齐浮动 div答案

【问题标题】：CSS: Bottom-aligning floated divs with percentage widthsCSS：具有百分比宽度的底部对齐浮动 div
【发布时间】：2014-11-14 08:33:33
【问题描述】：

我正在尝试找出正确的 CSS 来垂直对齐两个相邻浮动的 div 的底部，如附图所示。我想避免必须相对于宽度绝对定位 div，因为标记为“DIV.1”的 div 将包含文本，并且宽度将根据文本大小/长度而变化。事实上，如果可能的话，我想对所有 div 使用基于百分比的宽度——标记为“DIV.2”的 DIV 将包含一个图像，并且该站点是响应式的，所以我想使用 @987654322 @ 和可能的百分比。

感谢您在这里提供任何见解。

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

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

使容器元素 display:table 并使用vertical alignment
使用 bottom: 0 将 div 绑定到其容器的底部。这适用于任何元素，只要它具有设置尺寸。
像上面的示例一样明确设置边距或将它们设置为百分比。
- 但请注意这一点，边距在计算大小时使用元素的百分比，而不是父元素。所以半高 div 的 margin-top: 100%，而不是你想象的容器高度的 50%。
在左侧 div 中使用填充可以降低内容。这可能是最直截了当的，你不必乱用浮点数。确保使用透明背景。

【讨论】：

谢谢汤姆；我会用你的方法配置一个小提琴并报告。

【解决方案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;}
}

【讨论】：

谢谢蒂莫西，唯一的事情是，如果可能的话，我宁愿不必声明宽度/高度，正如我在原始帖子中提到的那样。
所以你想要它响应？
响应式布局一直是我的弱点。