CSS - 等高列? [英] CSS - Equal Height Columns?
本文介绍了CSS - 等高列?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在CSS中,我可以这样做:
In CSS, I can do something like this:
但我不知道如何将其改为:
But I've no idea how to change that to something like:
CSS是否可能?
如果是的话,如何在不明确指定高度的情况下p>
If yes, how can I do it without explicitly specifying the height (let the content grow)?
推荐答案
Flexbox
如果您在2013年年底阅读, flexbox在您的处置。假设此布局:
Flexbox
If you are reading this in late 2013, you have flexbox at your disposal. Assuming this layout:
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
对于flexbox,等高列只是一个声明:
With flexbox, equal height columns is just one declaration:
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
}
浏览器支持:http://caniuse.com/flexbox ;演示: http://jsfiddle.net/7L7rS/
Browser support: http://caniuse.com/flexbox; demo: http://jsfiddle.net/7L7rS/
如果您仍然需要支持IE 8或9,则必须使用表格布局:
If you still need to support IE 8 or 9, then you have to use table layout:
.row {
display: table;
}
.col {
display: table-cell;
width: 33.33%; /* depends on the number of columns */
}
这篇关于CSS - 等高列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文