css - 在第二列后重置浮点数

Question

我有以下布局：

HTML：

<div class="test">
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
</div>

CSS：

.test .a,.test .b {
  float: left;
  width: 100px; 
}

.test .a:nth-child(4n+1) , .test .b:nth-child(4n+2) { 
  background: lightgreen;
}


.test .b:after {
  clear: both;
  display: block;
  content: "\a";  
}

float之后它不会重置.b；

我试图实现的是两列列表，例如

test test2
test test2
test test2
test test2

两列都有固定宽度

这里有什么方法可以只使用 CSS 来实现我的目标吗？（没有 html 标记更改）

http://jsbin.com/aJiMECE/12/edit

Answer 1

你可以使用:nth-child()：

.test .a:nth-child(2n+1) {
    clear: both;
}

例子

要给容器 div 一个宽度/背景，你可以添加这个（见这里）：

.test {
    background: red;
    width: 400px;
    overflow: hidden;
}

例子

Answer 2

你想要这样的东西吗？jsFiddle在这里

这似乎是您想要实现的布局 - 除非我遗漏了什么。

CSS

.test {
    width:200px;
}
.test > div {
    width:100px;
}
.a {
    float:left;
}
.b {
    float:right;
}