CSS - 相等高度列？

时间：2010-01-22 03:35:39

标签： css html

在CSS中，我可以这样做：

enter image description here

但我不知道如何将其改为：

enter image description here

这可以用CSS吗？

如果是，如何在不明确指定高度的情况下（让内容增长）？

11 个答案:

答案 0 :(得分：48)

Flexbox的

如果您在2013年末阅读此内容，则可以使用flexbox。假设这个布局：

<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

对于flexbox，相等高度的列只是一个声明：

.row {
    display: flex; /* equal height of the children */
}

.col {
    flex: 1; /* additionally, equal width */
}

浏览器支持：http://caniuse.com/flexbox;演示：http://jsfiddle.net/7L7rS/

表格布局

如果您仍需要支持IE 8或9，则必须使用表格布局：

.row {
    display: table;
}

.col {
    display: table-cell;
    width: 33.33%; /* depends on the number of columns */
}

演示：http://jsfiddle.net/UT7ZD/

答案 1 :(得分：16)

Yes.

这是文章使用的完整CSS。值得reading the entire article，因为作者会逐步了解您需要做些什么。

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

这不是唯一的方法，但这可能是我遇到过的最优雅的方法。

还有另一个网站以这种方式完成，viewing the source will allow you to see how they did it。

答案 2 :(得分：10)

将overflow: hidden提供给容器，将大（等）负边距和正填充添加到列。 Note that this method has some problems, e.g. anchor links won't work within your layout.

标记

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

CSS 

.container {
    overflow: hidden;
}

.column {
    float: left;    
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

The Result

CSS equal height columns

答案 3 :(得分：4)

您可以使用以下JavaScript轻松完成此操作：

$(window).load(function() {
    var els = $('div.left, div.middle, div.right');
    els.height(getTallestHeight(els));
}); 

function getTallestHeight(elements) {
    var tallest = 0, height;

    for(i; i < elements.length; i++) {
        height = $(elements[i]).height();

        if(height > tallest) 
            tallest = height;
    }

    return tallest;
};

答案 4 :(得分：4)

您可以使用CSS表格，如下所示：

<style type='text/css">
    .container { display: table; }
    .container .row { display: table-row; }
    .container .row .panel { display: table-cell; }
</style>
<div class="container">
    <div class="row">
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
    </div>
</div>

答案 5 :(得分：0)

你可以尝试一下......它适用于我和所有浏览器兼容... 

<div id="main" style="width:800px; display:table">
<div id="left" style="width:300px; border:1px solid #666; display:table-cell;"></div>
<div id="right" style="width:500px; border:1px solid #666; display:table-cell;"></div>
</div>

答案 6 :(得分：0)

回答：

CSS flexbox很可爱，但今天淘汰IE9用户有点疯狂。关于我们截至2015年8月1日的房产：

3％IE9
2％IE8

削减这些显示5％的页面破损？疯狂。

使用媒体查询，与display: table/table-cell一样，引导程序goes back to IE8 http://jsfiddle.net/b9chris/bu6Lejw6/。所以：

natural earth data

HTML 

<div class=box>
    <div class="col col1">Col 1<br/>Col 1</div>
    <div class="col col2">Col 2</div>
</div>

CSS 

body {
    font: 10pt Verdana;
    padding: 0;
    margin: 0;
}

div.col {
    padding: 10px;
}

div.col1 {
    background: #8ff;
}
div.col2 {
    background: #8f8;
}

@media (min-width: 400px) {
    div.box {
        display: table;
        width: 100%;
    }
    div.col {
        display: table-cell;
        width: 50%;
    }
}

在这种情况下，我使用400px作为列之间的切换和垂直布局，因为jsfiddle窗格趋势非常小。混乱的窗口大小，你会看到列很好地重新排列自己，包括拉伸到全高，当他们需要列，所以他们的背景颜色不会在页面的中途被切断。没有疯狂的填充/边距黑客攻击页面上的后续标签，也没有5％的访问者扔给狼。

答案 7 :(得分：0)

另一个选择是使用已解决此问题的框架。 Bootstrap目前没有相同的高度选项，但是Zurb的基金会有，你可以在这里看到它的工作原理：http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

以下是您如何使用它的示例：

<div class="row" data-equalizer>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
</div>

基本上他们使用javascript来检查最高的元素并使其他元素具有相同的高度。

所以，如果你只想要css，这会添加更多代码，但如果你已经在使用框架，那么他们已经解决了这个问题。

快乐的编码。

答案 8 :(得分：0)

现代化的方法：CSS Grid。

HTML：

<div class="container">
  <div class="element">{...}</div>
  <div class="element">{...}</div>
  <div class="element">{...}</div>
</div>

CSS：

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.element {
  border: 2px solid #000;
}

实例是here。

repeat(auto-fit, minmax(200px, 1fr));部分设置列宽。每列占用一小部分可用空间，但不能小于200px。而不是缩小到200px以下它包裹在下面，所以它甚至响应。你也可以拥有任意数量的专栏，而不仅仅是3.他们都很合适。

如果您只需要3列，请改用grid-template-columns: repeat(3, 1fr);。您仍然可以拥有更多元素，它们将包装，响应，但总是放在3列布局中。

有关MDN或css-tricks上的CSS网格的更多信息。

它干净，易读，易于维护，灵活且易于使用！

答案 9 :(得分：0)

使用 Flexbox 创建高度相等的列

* {box-sizing: border-box;}

/* Style Row */
.row {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}

/* Make the columns stack on top of each other */
.row > .column {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* When Screen width is 400px or more make the columns stack next to each other*/
@media screen and (min-width: 400px) {
  .row > .column {    
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
<div class="row">
  <!-- First Column -->
  <div class="column" style="background-color: #dc3545;">
    <h2>Column 1</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
  </div>
  <!-- Second Column -->
  <div class="column" style="background-color: #ffc107;">
    <h2>Column 2</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
  </div>
  <!-- Third Column -->
  <div class="column" style="background-color: #007eff;">
    <h2>Column 3</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
  </div>
</div>

答案 10 :(得分：-1)

以下是我在SASS中编写的一个示例，它具有可变的列间隙和列数量（变量）：

CSS：

.fauxer * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.fauxer {
  overflow: hidden; }

.fauxer > div {
  display: table;
  border-spacing: 20px;
  margin: -20px auto -20px -20px;
  width: -webkit-calc(100% + 40px);
  width: -moz-calc(100% + 40px);
  width: calc(100% + 40px); }

.fauxer > div > div {
  display: table-row; }

.fauxer > div > div > div {
  display: table-cell;
  width: 20%;
  padding: 20px;
  border: thin solid #000; }
<div class="fauxer">
                <div>
                    <div>
                        <div>
                            Lorem column 1
                        </div>
                        <div>
                            Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr, 
                            sed diam nonumy eirmod tempor invidunt ut labore et 
                            dolore magna aliquyam erat, sed diam voluptua.
                        </div>
                        <div>
                            Lorem column 3
                        </div>
                        <div>
                            Lorem column 4
                        </div>
                        <div>
                            Lorem column 5
                        </div>
                    </div>
                </div>
            </div>

注意：我只是在一些新的浏览器中找到了测试它的时间。请在使用之前进行测试：）

您可以在此处获取SCSS中的可编辑示例：JSfiddle

相关问题
最新问题