html - 使两个平行的 `<div>` 列具有相同的高度

标签 html css

假设我有两列,都用 <div> 表示堵塞。两列都可能比另一列变大,所以我想强制较小的列与另一列一样大。

我的问题示例:http://jsfiddle.net/TvnSJ/

如您所见,第二列较小。

我设法使用表格解决了这个问题,但我无法在它们之间添加边距。 margin 很重要,所以我想知道另一种解决方案。

最佳答案

您可以使用display: tabledisplay: table-cell。这是您更新的 fiddle :http://jsfiddle.net/TvnSJ/2/

这使得 div 呈现为 td。基本上,当语义不正确时,您可以在不使用表格的情况下获得表格的布局。不过,我认为您无法漂浮它们。

编辑:我刚刚注意到关于 margin 的一点。您可以向这些添加填充,或者如果您需要分隔以不包括背景颜色,则可以将内容包装在另一个元素中并为其添加边距。

关于html - 使两个平行的 `<div>` 列具有相同的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20592058/

相关文章:

html - 具有三个 DIV 的 Flexbox 容器

html - 如何将像谷歌这样的大搜索文本字段居中?

javascript - 如何在DataTables jquery中获取具有隐藏行的单列中单元格的DOM?

javascript - 如何在 Visual Studio 2013 中 'do'(并使用)HTML 包(来自 Web Essentials)

html - 为什么我的 :first-child css rule get applied? 没有

css - 使用 css 选择器选择所有具有某些类但没有样式属性的 div 元素

html - 为什么 Firefox 会忽略 flex-item 的底部边距?

html - span.icon-bar 未显示在浏览器中

javascript - 为什么我不能按名称选择表单元素并使用它们的值使用 jQuery 设置变量

css - 100% Div 高度问题