CSS交替浮动DIV

Question

我有以下HTML代码：

<div class="messages">
    <div class="message">1</div>
    <div class="message">2</div>
    <div class="message">3</div>
    <div class="message">4</div>
    <div class="message">5</div>
    <div class="message">6</div>
    <div class="message">7</div>
    <div class="message">8</div>
</div>

我想做的是使用奇数/偶数nth-child选择器对它们进行一些交替浮动。然而，我想要更加复杂的东西。我不希望每个消息节点都执行“清除”操作，而是希望它们能够紧贴在它们上面的节点上。这是否仅通过CSS实现呢？

编辑： 没有必要为盒子随机分配高度。每个盒子内都会有文字体（人们的评论），这将使得每个盒子的高度都不同。如果我没有说明清楚，我很抱歉。

- voldomazta

---

我认为仅使用CSS无法实现这一点。但是有很好的jQuery插件，如jQuery wookmark和jQuery Masonry，可以很好地完成此任务。当然，如果这对您是一个选项的话。 - Nojan

这种布局仅使用CSS和flexbox就可以实现：http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox - Steve Sanders

@SteveSanders 是的，只要你不需要支持IE9。 - Dave

@SteveSanders 那个布局是先填充第一列，然后再放到其他列中。这不是 OP 想要的。请注意他的示例中的 LTR 方向。 - Alin Purcaru

我觉得像砖石排列这样的东西是我一直在追求的方向。谢谢你的建议。 - voldomazta

Answer 1

我一点也不是CSS大师，但在试验一些占位文本时，我成功地做到了这一点。 clear:语句的作用是防止在“奇数”侧出现“偶数”。

更好的答案可能会来自于其他人。

因此，要回答您最初的问题，使用CSS“有点”可以实现您想要的效果。 我无法弄清楚第7个

的起始位置为什么是那样。

.alt,
body,
html {
  height: 100%;
}
.alt div:nth-child(even) {
  float: right;
  clear: right;
}
.alt div:nth-child(odd) {
  float: left;
  clear: left;
}
.alt div {
  box-sizing: border-box;
  width: calc(50% - 5px);
  margin-bottom: 5px;
  border: 1px dotted grey;
}

<div class="alt">
  <div>1 lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>2 lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>3 lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>4 lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.
    lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem
    ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>5lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>6lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>7lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem
    ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum
    dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
  <div>8 lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor. lorem ipsum dolor.</div>
</div>

- Jhecht

---

你是否曾经找到解决第七个 div 网页布局问题的方法？ - Zero3

我不能说我做到了。它要么从例子所在的位置开始，要么凑成错误的一侧。我猜这与交替清除有关，但如果没有它们，它就无法正常工作。 - Jhecht

我找到原因了！http://w3.org/TR/CSS21/visuren.html#float-position - 第5点：“_浮动框的外部顶部不能高于源文档中先前元素生成的任何块或浮动框的外部顶部_”。因此，框7的顶部不能高于框6的顶部。 - Zero3

啊，这样我们就需要使用js来完全实现它。 - Jhecht

Answer 2

这里有一个使用浮动布局的例子:

JSFiddle

---

我刚刚注意到您想让高度依赖于内容。我不知道除了使用jQuery/JS设置基于最大盒子的高度之外，还有什么其他方法可以实现这一点。

浮动结构依赖于盒子的高度非常精确，因此盒子＃1和＃4，＃2和＃3，＃5和＃8以及＃6和＃7必须具有相同的高度，否则它根本无法工作。

---

否则，这里有一些固定高度的示例：

HTML：

<div class="container">
    <div class="message"></div>
    <div class="message"></div>
    <div class="message"></div>
    <div class="message"></div>
    <div class="message short"></div>
    <div class="message short"></div>
    <div class="message short"></div>
    <div class="message short"></div>
</div>

CSS:

div.container
{
    width: 600px;
    font-size: 0;
}

div.message {
    display: inline-block;
    height: 300px;
    width: calc(50% - 10px);
    background: #ccc;
    
    margin: 5px;
}

div.message.short
{
    height: 200px;
}

div.message:nth-child(4n-3),
div.message:nth-child(4n)
{
    float: left;
}

div.message:nth-child(4n-1)
{
    float: right;
}

div.message:nth-child(4n-2),
div.message:nth-child(4n)
{
    height: 100px;
}

- Liftoff

Answer 3

可以通过CSS和Javascript的组合实现，例如Masonry或Isotope；但很可能无法使用CSS3完成。也许在CSS4推出后会有可能，但那还有很长的路要走。

另外，我会预先设计所需的内容，然后为div定义单独的类。例如，在图片中，2和3将是相同的类，4、6和7将是相同的类；然后使用CSS定位、浮动、边距和填充来适当地定义。

如果您想要一些动态效果，仅使用CSS是不够的；但如果您知道您想要的样子，您可以通过为不同的div定义单独的类来使用CSS。

p.s. 您可以使用CSS child来定义一组类，但它仍然是在做同样的事情，它并不完全动态，因为您需要首先知道您想要的样子。

- Art Badger