javascript - 是否可以在不借助 Javascript 的情况下做到这一点？

Question

This demo 与 this article 一起，简洁地描述了我需要做什么。然而，我对使用 javascript 来实现纯 CSS 中应该可以实现的功能并没有留下深刻的印象。

引用的文章(我在寻找 CSS 方法时也独立发现了这些文章)并不执行与钟表匠演示相同的功能 - 当屏幕宽度变得太小时，the 456 boxes demo 不会滑到其他框下方。

我一直在研究文章代码并尝试 CSS 中的各种想法，但没有任何布局正确。另外，我更喜欢渐进增强而不是优雅降级。

Answer 1

我意识到这是一个老问题，但我想冒出您现在应该使用的答案:flexbox 。问题的原始演示早已不复存在，但标记是这样的( courtesy of the Wayback Machine ):

<div id="one">I am 150px high</div>
<div id="two">I am 200px high</div>
<div id="three">I am 120px high</div>
<div id="four">I am 300px high</div>

为了使用 Flexbox 均衡高度，您需要在它们周围包裹一个容器:

<div class="container container--equal-children">
  <!-- those four divs -->
</div>

将其设置为 display: flex 并将 align-items 设置为“stretch”即可获得所需的效果:

.container--equal-children {
  display: flex;
  align-items: stretch;
}

一旦就位，您可以跳过整个尺寸调整过程，让子项 flex 以填充 1/4 的空间:

.container--equal-children #one,
.container--equal-children #two,
.container--equal-children #three,
.container--equal-children #four {
  flex: 0 1 25%;
}

它们将自动具有相同的高度。

我整理了a CodePen that lets you toggle the flexbox rules on and off 。值得注意的是，只有切换功能需要 JS。我还添加了一些“仅用于演示”的样式规则(已注明)来演示设计行为。