Question

我正在尝试使用内联块div创建一个双列Feed（如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;
}

Answer 1

您可以通过将测试div分成两个父div并将内联块显示应用于父级而不是测试div本身来实现此目的。这允许内容在父节点内自由流动，并允许div在彼此旁边定位，没有＆＃34;间隙＆＃34;上方。

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

FIDDLE： http://jsfiddle.net/JWjxP/27/

使用内联块div的CSS列

1 个答案: