等高柱? ？

在 CSS 中，我可以这样做:

enter image description here

但我不知道该怎么改成这样:

enter image description here

用 CSS 可以做到这一点吗？

如果是，如何在不显式指定高度(让内容增长)的情况下完成？

120435 次浏览
小开

是的

下面是本文使用的完整 CSS。这是非常值得 读完了整篇文章，因为作者一步一步地进入你需要什么，使这个工作。

#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;
}

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

还有一个站点完全是这样做的，查看源代码可以让你看到他们是如何做到的。

小开

你可以很容易地用下面的 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;
};
小开

你可以使用 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>
小开

给容器赋予 overflow: hidden，给列赋予大的(和等于的) 负边缘和正填充

加价

<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;
}

结果

CSS equal height columns

小开

你可以试试... 它对我和所有浏览器兼容..。

<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>
小开
最佳答案

网格

现在，我更喜欢网格，因为它允许在父级上保持所有布局声明，默认情况下给你相同的宽度列:

.row {
display: grid;
grid-auto-flow: column;
gap: 5%;
}


.col {
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>

Flexbox

使用 Flexbox 如果你想让子项控制列宽:

.row {
display: flex;
justify-content: space-between;
}


.col {
flex-basis: 30%;
box-sizing: border-box;
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>

小开

回答:

CSS flebox 很可爱，但是现在把 IE9用户排除在外有点疯狂。截至2015年8月1日:

3% IE9
2% IE8

删掉这些就是显示5% 的损坏页面? 太疯狂了。

使用媒体查询，就像 Bootstrap 处理 可以追溯到 IE8和 display: table/table-cell一样。所以:

Http://jsfiddle.net/b9chris/bu6lejw6/

超文本标示语言

<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% 的访问者的狼。

小开

另一种选择是使用解决了这个问题的框架。Bootstrap 目前没有一个等高的选项，但是 ZurbFoundation 有，你可以在这里看到它是如何工作的: 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，这将增加更多的代码，但如果你已经使用一个框架，那么他们已经解决了这个问题。

编程愉快。

小开

这里有一个例子，我刚刚写在 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

小开

现代的方法: CSS 网格。

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;
}

实例是 给你。

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

如果正好需要3列，则使用 grid-template-columns: repeat(3, 1fr);。您仍然可以有更多的元素，他们将包装，响应，但总是放在3列布局。

更多关于 MDN或 CSS 把戏的 CSS 网格。

它干净，可读，可维护，灵活，而且使用简单！

小开

使用 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>


提交答案