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与百分比宽度

回答

相关问题