同样高度箱的优雅解决方案
同样高度箱的优雅解决方案
提问于 2015-02-01 01:58:23
我一排有三个盒子，每个盒子都有不同的内容。他们的身高不一样。是否有一种优雅的解决方案，不涉及绝对定位，以便在每个盒子上动态地产生相同的高度？
我不喜欢使用最大高度，因为它不是动态的未来。
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-02-01 02:04:13
您可以使用显示表：
<div style='display: table; color: #fff; width: 100%'>
<div style='display: table-cell; background:red;'>
<p>Hi</p>
</div>
<div style='display: table-cell; background:green'>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
</div>
<div style='display: table-cell; background:blue'>
<p>Hi</p>
</div>
</div>http://jsfiddle.net/nofmdho4/
Stack Overflow用户
发布于 2015-02-01 02:07:49
如果你只瞄准现代浏览器，最优雅的解决方法就是使用flexbox。例如：
<div style='display: flex; flex-direction: row; color: #fff;'>
<div style='flex: 1; background:red;'>
<p>Hi</p>
</div>
<div style='flex: 1; background:green'>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
</div>
<div style='flex: 1; background:blue'>
<p>Hi</p>
</div>
</div>http://jsfiddle.net/nofmdho4/1/
Stack Overflow用户
发布于 2015-02-01 02:02:58
尝试一个表格布局，如下所示：
#css-table {
display: table;
}
#css-table .col {
display: table-cell;
width: 25%;
padding: 10px;
}
#css-table .col:nth-child(even) {
background: #ccc;
}
#css-table .col:nth-child(odd) {
background: #eee;
}<div id="css-table">
<div class="col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
</div>
<div class="col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="col">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28258654
复制相关文章
相似问题
腾讯云开发者
