Question

与This demo一起的

this article，简洁地描述了我需要做的事情。但是，对于纯CSS中应该可以使用的javascript，我并没有留下深刻的印象。

引用的文章（我在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设置为＆＃34;延伸＆＃34;给出了预期的效果：

.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%;
}

它们将自动高度相同。

我把a CodePen that lets you toggle the flexbox rules on and off放在一起。值得注意的是只有切换功能需要JS。还有一些＆＃34;仅用于演示＆＃34;我添加的样式规则（注明）用于演示设计行为。

Answer 2

不幸的是，在纯CSS中真的没有一个好方法。我假设你想要一个基于单个父容器的动态高度的容器。跨浏览器问题使它成为一个绝对的噩梦，实现这种效果所需的相对少量的JavaScript，IMO，比尝试维护真正丑陋和令人讨厌的CSS规则更好的方法，必须导入其他CSS规则来修复某些浏览器等等。

这些“平等高度”脚本甚至存在，这是因为纯CSS中的效果有多大麻烦。

我会坚持使用JavaScript解决方案。

Answer 3

这是你认为很简单但实际上非常棘手的事情。

“滑动下”方面与保持相同尺寸无关。这就是浮动的工作方式。他们可能有这样的规则：

.box { float: left }

标记如：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

如果他们给.container一个固定的宽度，这将阻止.box的相互滑动。

如果你想要的是在各种固定宽度的盒子下面都有背景颜色，那么没有JS就可以轻松实现这一目标。

您可以为.container提供一个背景图像，该图像具有垂直所有框和图块的背景。在您的第一个示例中，它只有几个像素高，200 px橙色部分，200px蓝色，200px红色和200px绿色。

因为如果你“清除”.container它会增长到包含所有框，那么背景框看起来都是相同的高度。

任何更复杂的事情，比如在第二个例子中垂直居中文本，你可能最好使用其中一个JS脚本来平衡框。

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

3 个答案: