花式css浮点+清除

Question

好的，我有四个未知高度的div，但宽度是固定的。虽然身高未知，但可以假定div1 > div3 > div2。他们(目前)都是一排排的，漂浮在一起。例如：

1111 2222 3333 4444
1111 2222 3333 4444
1111 2222 3333
1111      3333
1111

当我调整视口的大小时，我想让最右边的元素自己重新定位，但要重新定位到“最高”的可能位置，而不是清除它剩下的部分。例：

1111 2222 3333
1111 2222 3333
1111 2222 3333
1111 4444 3333
1111 4444

(这不是在一般情况下发生的情况。4被放置在更低的位置，这样它就清除了3的底部。

在下一次调整尺寸时，最“紧凑”的安排如下：

1111 2222
1111 2222
1111 2222
1111 3333
1111 3333
4444 3333
4444

(再一次，4通常位于较低的位置，这样它就清除了3)。

最后：

1111
1111
1111
1111
1111
2222
2222
2222
3333
3333
3333
4444
4444

我尝试过一些非常有创意的安排，将某些对div封装在容器div中，并对其应用不同的样式，对某些元素进行绝对定位，在容器div上设置最小/最大宽度、设置不可见的shims等等。我在其中一些场景中取得了成功，但在所有4种可能性中都没有成功的解决方案。有什么想法吗？此外，如果存在，我将不使用javascript--我正在寻找一个纯css解决方案。谢谢

Answer 1

将此用作标记：

<div class="column" id="col-1"><h2>One</h2></div>
<div class="column" id="col-2"><h2>Two</h2></div>
<div class="column" id="col-3"><h2>Three</h2></div>
<div class="column" id="col-4"><h2>Four</h2></div>

使用媒体查询，您可以根据视图端口的大小调整样式：

body { margin: 0; padding: 0; }

.column {
  width: 200px;
  display: inline;
  float: left;
  overflow: hidden;
}

.column h2 { text-align: center; }

#col-1 { padding: 400px 0; background: #ccf; }
#col-2 { padding: 200px 0; background: #fcc; }
#col-3 { padding: 300px 0; background: #cfc; }
#col-4 { padding: 100px 0; background: #ccc; }

@media (max-width: 800px) {
  body { width: 600px; }
  #col-3 { float: right; }
  #col-4 { display: block; float: none; }
}

@media (max-width: 600px) {
  body { width: 400px; }
  #col-1, #col-4 { float: left; clear: left; }
  #col-2, #col-3 { float: right; clear: right; }
}

@media (max-width: 400px) {
  body { width: 200px; }
  .column { display: block; float: none; }
}

试试看。

缺点是这些媒体查询在IE8和更少中不受支持。但是，您可以使用最少数量的javascript来伪造它，在调整窗口大小时在文档体上设置一个类:然后您可以基于此指定CSS选择，例如body.width-200 .column { /* ... */ }。