是否可以不借助Javascript来做到这一点？

Question

这个演示与本文一起,简洁地描述了我需要做的事情.但是,对于纯CSS中应该可能使用的javascript,我并没有留下深刻的印象.

引用的文章(我在CSS中寻找方法时也独立发现)不能执行与制表演示相同的功能 - 当屏幕宽度太小时,456盒演示不会在其他框下滑动.

我一直在玩文章代码并在CSS中尝试各种想法,但没有任何正确的布局.此外,我更喜欢渐进式增强而非优雅降级.

Answer 1

我意识到这是一个古老的问题,但我想提出你现在应该使用的答案:flexbox.这个问题的原始演示早已不复存在,但标记是这样的(由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为"拉伸" 并设置为"拉伸"可获得所需效果:

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

一旦到位,您可以跳过整个尺寸,让孩子弯曲以填充1/4的空间:

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

它们将自动高度相同.

我整理了一个CodePen,它允许您打开和关闭flexbox规则.值得注意的是只有切换功能需要JS.我还添加了一些"仅用于演示"的样式规则(用于说明)来演示设计行为.