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>

我想做的是使用奇数/偶数第n个子选择器对它们进行一些替换浮点运算。但是我想要一些更复杂的东西。我希望它们能够靠近它们上面的节点，而不是让每个消息节点都“清除”。这只能通过CSS实现吗？

编辑： 无需为箱子随机分配高度。每个方框都会在其中包含文本正文（人们的评论），这些文本将使每个框的高度变化。如果我在这里没有说明，我很抱歉。

Answer 1

我绝不是一个CSS大师，但是在弄乱一些填充文本时，我能够得到它。

clear:语句是因为没有它们，你有时会在“奇数”一侧出现“偶数”。

赔率是某种更好的方式会给你一个更好的答案。

因此，为了回答您的原始问题，您想要的是“使用CSS可能”。我无法弄清楚为什么7 div开始它的位置。

.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>

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

Answer 3

可以使用CSS和Javascript的组合，如Masonry或Isotope;但很可能无法用CSS3完成。也许当CSS4问世时，它是可能的，但这还有很长的路要走。

或者，我要做的是预先设计我想要的东西，然后为div定义单独的类。例如，在图片中，2和3将是同一个类，4,6和7将是同一个类;然后使用CSS定位，浮点数，边距和填充来适当定义。

如果你想要一些动态的东西，你就不能单独使用CSS;但是如果你知道你想要它的样子，你可以通过为不同的div定义单独的类来使用CSS。

P.S。你可以使用css child来定义类的集合，但是它仍然在做同样的事情，它不是完全动态的，因为你需要知道你想要它的样子。< / p>