如何使所有三个部分的高度相同?

时间:2013-04-03 10:09:08

标签: css

我附上了这个问题的截图。有三列,我想保持所有三列的高度完全相同。我设法保持宽度与宽度css属性相同,现在我想调整到高度。任何人都可以在这方面帮助我。在此先感谢。enter image description here

3 个答案:

答案 0 :(得分:1)

我会使用以下CSS来实现这个目标:

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

使用table-layout: fixed,您可以告诉display: table-cell的每个子元素具有相同的宽度,基于包装器的宽度均等分布,以及相等的高度。

Demo

答案 1 :(得分: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列规范要求必须平衡列高度:即,浏览器会自动设置最大列高,以便每列中内容的高度大致相等。

答案 2 :(得分:0)

实际上没有权利,跨浏览器方式来做这件事,而是你必须诉诸一些 hacks

  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. 您可以使用 javascript库,例如http://www.cssnewbie.com/equalheights-jquery-plugin/#.UVwCaZAW200来实现此目的。但是,如果列的高度在高度上发生变化(例如,您有一个可折叠的项目),则此方法不起作用。当然,您可以通过处理这些事件并重新计算高度来处理这种情况。

  3. 最后你可以使用身高: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>
    
  4. 希望将来这会变得更简单......