1

我正在尝试使用内联块 div 创建一个两列提要（如 google+ 或 pinterest），并且由于多种原因不能使用 CSS3 列（部分原因是两列都应该填充第一个元素，而不仅仅是第一列）。理想情况下，我也想避免使用 Javascript，但如果那是不可能的，那么无论如何。

我创建了这个：

http://jsfiddle.net/JWjxP/1/

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

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

.test1, .test2, .test3 {
  background: white;
  display: inline-block;
  border: 1px solid black;
  width: 50%;
  float: left;
}

并且包装器具有以下规则：

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

1 回答 1

1

您可以通过将测试 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>

CSS：

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

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

小提琴：http : //jsfiddle.net/JWjxP/27/

于 2018-05-23T06:22:45.370 回答