Question

我有4列，我决定为它们设置一个高度值，因为我喜欢它们看起来在同一行结束但是我正在进行灵活的布局，我的意思是，当浏览器调整大小并且页面时变得越来越窄，盒子的高度应该延伸。那么如何在不设置高度值的情况下均匀设置盒子的高度？

Answer 1

如果我理解正确的话，您希望所有列都具有相同的高度。

您可以通过将div显示为表格单元来解决此问题，如下所示：

HTML：

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

CSS：

body > div {
    display: table;
    width: 100%;
}
div > div {
    display: table-cell;
    width: 25%;
}

同时检查此demo。单击第一列以添加一些额外的文本（这样您就可以看到它是如何工作的。

Answer 2

你可以，但你需要使用javascript来完成它。

Flexbox做了你想要的，但它恰好介于两个规格之间，目前支持得很差，因为浏览器在它们支持的规范方面相距甚远，所以遗憾的是它没有在这个阶段真的是一个选择..

您可以使用javascript创建自己的。或使用flexbox polyfill

Answer 3

有很多方法可以实现这一目标。请尝试以下链接。