html - CSS:使用百分比宽度底部对齐 float div

Question

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

感谢您提供任何见解。

Answer 1

几种方法:

• 使容器元素显示:表格并使用vertical alignment

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

• 像上面的示例一样明确设置边距或将它们设置为百分比。

  • 不过要小心，边距在计算大小时使用元素的百分比，而不是父元素的百分比。所以一个半高的 div 会有 margin-top: 100%，而不是你想象的容器高度的 50%。

• 在左侧 div 中使用内边距将内容向下填充。这可能是最直接的，您不必乱用 float 。确保使用透明背景。