0

我附上了这个问题的截图。有三列，我想保持所有三列的高度完全相同。我设法保持宽度与宽度 css 属性相同，现在我想调整到高度。任何人都可以在这方面帮助我。提前致谢。在此处输入图像描述

4

3 回答 3

1

我将使用以下 CSS 来实现此目的：

.wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.column {
    display: table-cell;
}

table-layout: fixed您告诉每个子元素具有display: table-cell相同的宽度，根据包装器的宽度均匀分布，以及相等的高度。

演示

于 2013-04-03T10:30:31.753 回答
0

实际上没有正确的跨浏览器方式来做到这一点，而是你必须求助于一些黑客。

  1. 我之前使用的一种方法是将三列包装在一个容器内，并为孔容器设置自定义背景。基本上，您创建一个图像，具有相同的网站宽度，具有两条垂直线，并将其设置为容器的背景。

    <div class="wrapper">
    <div class="column">....</div>
    <div class="column">....</div>
    <div class="column">....</div>
</div>

<style> .wrapper { background-image: url(wrapper-bg.png); } </style>

  2. 您可以使用像http://www.cssnewbie.com/equalheights-jquery-plugin/#.UVwCaZAW200这样的javascript 库来实现这一点。但是，如果列的高度在高度上发生动态变化（例如，您有一个可折叠的项目），则此方法不起作用。当然，您可以通过处理这些事件并重新计算高度来处理这种情况。

  3. 最后你可以使用height: 100%。然而，这并不像看起来那么简单！此解决方案仅适用于块元素，并且必须知道父元素的大小。因此，如果您事先知道网站的大小，则可以执行以下操作：

    <div class="wrapper">
    <div class="column">....</div>
    <div class="column">....</div>
    <div class="column">....</div>
</div>

<style>
    .wrapper { height: 1000px; width:900px; }
    .column { width:300px; float:left; height: 100%; }
</style>

希望将来这会变得更简单......

于 2013-04-03T10:24:43.743 回答
0

在纯 CSS 中，您可以使用 CSS3 列：对于 3 列布局，只需尝试使用

<div style="columns:3">...</div>

（同时带有-moz-和-webkit-前缀）
请参阅https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts以获取参考，特别是关于高度平衡：

高度平衡
CSS3 Column 规范要求必须平衡列高：即浏览器自动设置最大列高，使每列内容的高度大致相等。

于 2013-04-03T10:15:03.033 回答