Html CSS - 等高列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2114757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Equal Height Columns?
提问by Alix Axel
In CSS, I can do something like this:
在 CSS 中，我可以这样做：
But I've no idea how to change that to something like:
但我不知道如何将其更改为：
Is this possible with CSS?
这可以用 CSS 实现吗？
If yes, how can I do it without explicitly specifying the height (let the content grow)?
如果是，如果不明确指定高度（让内容增长），我该怎么做？
采纳答案by Pavlo
Flexbox
弹性盒
Assuming this layout:
假设这种布局：
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
With flexbox, equal height columns is just one declaration:
对于 flexbox，等高列只是一个声明：
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
}
Browser support: http://caniuse.com/flexbox; demo: http://jsfiddle.net/7L7rS/
浏览器支持：http: //caniuse.com/flexbox；演示：http: //jsfiddle.net/7L7rS/
Table layout
表格布局
If you still need to support IE 8 or 9, then you have to use table layout:
如果你仍然需要支持 IE 8 或 9，那么你必须使用表格布局：
.row {
display: table;
}
.col {
display: table-cell;
width: 33.33%; /* depends on the number of columns */
}
回答by Joel Etherton
Here is the completed CSS the article uses. It is well worth reading the entire article, as the author goes step by step into what you need to make this work.
这是文章使用的完整 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;
}
This isn't the only method for doing it, but this is probably the most elegant method I've encountered.
这不是唯一的方法，但这可能是我遇到的最优雅的方法。
There is another site that is done completely in this manner, viewing the source will allow you to see how they did it.
还有另一个网站完全以这种方式完成，查看源代码将让您看到他们是如何做到的。
回答by Dan Abramov
Give overflow: hiddento the container and large (and equal) negative margin and positive paddingto columns. Note that this method has some problems, e.g. anchor links won't work within your layout.
给overflow: hidden容器和大的（和相等的）负边距和列的正填充。请注意，此方法有一些问题，例如锚链接在您的布局中不起作用。
Markup
标记
<div class="container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
CSS
CSS
.container {
overflow: hidden;
}
.column {
float: left;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
The Result
结果
回答by xandercoded
You can do this easily with the following JavaScript:
您可以使用以下 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;
};
回答by K Prime
You could use CSS tables, like so:
您可以使用 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>
回答by kamyl
Modern way to do it: CSS Grid.
现代方法：CSS Grid。
HTML:
HTML：
<div class="container">
<div class="element">{...}</div>
<div class="element">{...}</div>
<div class="element">{...}</div>
</div>
CSS:
CSS：
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.element {
border: 2px solid #000;
}
Live example is here.
现场示例在这里。
repeat(auto-fit, minmax(200px, 1fr));part sets columns width. Every column takes 1 fraction of available space, but can't go less than 200px. Instead of shrinking below 200px it wraps below, so it's even responsive. You can also have any number of columns, not just 3. They'll all fit nicely.
repeat(auto-fit, minmax(200px, 1fr));部分设置列宽。每列占用可用空间的 1 分之一，但不能小于 200 像素。它不会缩小到 200 像素以下，而是包裹在下方，因此它甚至具有响应性。您还可以拥有任意数量的列，而不仅仅是 3。它们都非常适合。
If you need exactly 3 columns, use grid-template-columns: repeat(3, 1fr);instead. You can still have more elements, they will wrap, be responsive, but always be placed in 3 column layout.
如果您正好需要 3 列，请grid-template-columns: repeat(3, 1fr);改用。您仍然可以拥有更多元素，它们会环绕、响应，但始终放置在 3 列布局中。
More on CSS Grid on MDNor css-tricks.
更多关于MDN或css-tricks上的 CSS 网格。
It's clean, readable, maintainable, flexible and also that simple to use!
它干净、可读、可维护、灵活且易于使用！
回答by Vishal
Use Flexboxto create equal height columns
使用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>回答by Sumon
You ca try it... it works for me and all browser compatible...
你可以试试...它适用于我和所有浏览器兼容...
<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>
回答by Chris Moschini
Responsive answer:
响应式答案：
CSS flexbox is cute, but cutting out IE9 users today is a little insane. On our properties as of Aug 1 2015:
CSS flexbox 很可爱，但今天切断 IE9 用户有点疯狂。截至 2015 年 8 月 1 日，我们的物业：
3% IE9
2% IE8
3% IE9
2% IE8
Cutting those out is showing 5% a broken page? Crazy.
删掉那些会显示 5% 的损坏页面？疯狂的。
Using a media query the way Bootstrap does goes back to IE8as does display: table/table-cell. So:
使用媒体查询引导的方式做追溯到IE8一样display: table/table-cell。所以：
http://jsfiddle.net/b9chris/bu6Lejw6/
http://jsfiddle.net/b9chris/bu6Lejw6/
HTML
HTML
<div class=box>
<div class="col col1">Col 1<br/>Col 1</div>
<div class="col col2">Col 2</div>
</div>
CSS
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%;
}
}
I used 400px as the switch between columns and a vertical layout in this case, because jsfiddle panes trend pretty small. Mess with the size of that window and you'll see the columns nicely rearrange themselves, including stretching to full height when they need to be columns so their background colors don't get cut off part-way down the page. No crazy padding/margin hacks that crash into later tags on the page, and no tossing of 5% of your visitors to the wolves.
在这种情况下，我使用 400px 作为列和垂直布局之间的切换，因为 jsfiddle 窗格的趋势非常小。弄乱那个窗口的大小，你会看到这些列很好地重新排列，包括在它们需要成为列时拉伸到全高，这样它们的背景颜色就不会在页面的中途被切断。没有疯狂的填充/边距黑客攻击页面上的后续标签，也没有将 5% 的访问者扔给狼群。
回答by Maximus
Another option is to use a framework that has this solved. Bootstrap currently doesn't have an equal height option but Foundation by Zurb does, and you can see how it works here: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html
另一种选择是使用解决了这个问题的框架。Bootstrap 目前没有等高选项，但 Foundation by Zurb 有，你可以在这里看到它是如何工作的：http: //foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html
Here's an example of how you'd use it:
这是一个如何使用它的示例：
<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>
Basically they use javascript to check for the tallest element and make the others the same height.
基本上他们使用javascript来检查最高的元素并使其他元素具有相同的高度。
So, if you want just css this would add more code, but if you are already using a framework then they have already solved this.
因此，如果您只想要 css，这将添加更多代码，但如果您已经在使用框架，那么他们已经解决了这个问题。
Happy coding.
快乐编码。
