使用内联块div的CSS列

我正试图使用内联块div创建一个两列提要（如google+或pinterest），由于一些原因，我不能使用CSS3列（部分原因是两列都应该填充第一个元素，而不仅仅是第一列）。理想情况下，我也希望避免使用Javascript，但如果这是不可能的，那么不管怎样

我创造了这个：

我想知道为什么标记为“4”的div没有流动来填补上面的空白（就像3一样）。我希望所有的div都从上面的div结束的地方开始，中间没有空格

所有div都有以下规则（加上各种高度）：

包装器具有以下规则：

.content {
  background: #999;
  height: 100%;
  text-align: left;
}

---

您可以通过将测试div拆分为两个父div并将内联块显示应用于这些父div而不是测试div本身来实现这一点。这允许内容在父级中自由流动，并允许div彼此并排放置，上面没有“间隙”

HTML:

<div class="pure-u-3-4 content">
  <div class="left">
    <div class="test1">1</div>
    <div class="test2">2</div>
    <div class="test3">3</div>
  </div>
  <div class="right">
    <div class="test3">4</div>
    <div class="test1">5</div>
    <div class="test2">6</div>
  </div>  
</div>

.left, .right {
  background: white;
  display: inline-block;
  border: 1px solid black;
  width: 50%;
  margin-right:-4px;  
  vertical-align:top;
}

.test1, .test2, .test3 {
  width:100%;
}

---

FIDDLE:

您可以通过将测试div分成两个父div，并将内联块显示应用于这些父div，而不是测试div本身来实现这一点。这允许内容在父级中自由流动，并允许div彼此并排放置，上面没有“间隙”

HTML:

<div class="pure-u-3-4 content">
  <div class="left">
    <div class="test1">1</div>
    <div class="test2">2</div>
    <div class="test3">3</div>
  </div>
  <div class="right">
    <div class="test3">4</div>
    <div class="test1">5</div>
    <div class="test2">6</div>
  </div>  
</div>

.left, .right {
  background: white;
  display: inline-block;
  border: 1px solid black;
  width: 50%;
  margin-right:-4px;  
  vertical-align:top;
}

.test1, .test2, .test3 {
  width:100%;
}

---

小提琴：

左侧浮动将考虑其上方的所有元素，这就是为什么它不会浮动到该空间中。您必须创建两列并手动将条目放在那里，或者使用javascript，因为CSS3是不可能的使用两列，浮动它们，用方框填充列，profit.stackoverflow.com/questions/17533103/如何在列中显示div流体设计/17533599？noredirect=1#17533599两天前我问自己同样的问题，读了我从该链接收到的答案。像这样吗？无论是浮动块还是内联块，只要它们碰到外部容器，它们就应该包裹。顺便说一句，2x50%+4px=>100%左浮动将其上面的所有元素都考虑在内，这就是它不会浮动到该空间的原因。您必须创建两列并手动将条目放在那里，或者使用javascript，因为CSS3是不可能的使用两列，浮动它们，用方框填充列，profit.stackoverflow.com/questions/17533103/如何在列中显示div流体设计/17533599？noredirect=1#17533599两天前我问自己同样的问题，读了我从该链接收到的答案。像这样吗？无论是浮动块还是内联块，只要它们碰到外部容器，它们就应该包裹。顺便说一句，2x50%+4px=>100%