Question

好吧，我有四个未知高度的div，但是固定宽度。虽然高度未知，但可以假设div1> div3＆gt; 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的底部）

并且，在下一次调整大小时，最“紧凑”的安排，如下：

（同样，4通常位于较低位置，以便清除3）。

最后：

我尝试了一些非常有创意的安排，在容器div中包装某些div并对其应用不同的样式，绝对定位一些元素，在容器div上设置最小/最大宽度，隐形垫片等等。其中一些场景已经取得了成功，但在所有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; }
}

Try it in jsfiddle

缺点是IE8不支持这些媒体查询。但是，您可以使用最少量的javascript来伪造此内容，这些javascript会在调整窗口大小时在文档正文中设置类：然后您可以根据该选项指定CSS选择，例如： body.width-200 .column { /* ... */ }。

花式css浮动+清算

1 个答案: