CSS：如何在两列中显示相同的元素，元素之间没有间隔？

Question

我有一些HTML代码，看起来像这样：

<div class="container"> 
    <div class="element"> </div> 
    <div class="element"> </div> 
    <div class="element"> </div> 
    <div class="element"> </div> 
</div> 

我想在两列布局，其中直接显示上面的一个下方的每个元素来显示它。我制作了JSFiddle来展示我目前的进度，但我无法弄清楚如何去除元素之间的白色空白。是否可能，还是我需要更改HTML（我宁愿不）？

Answer 1

尝试通过改变3个格高度为20px改变一个和三个div的高度之和相同的两到30PX

.three { 
    float: left; 
    width: 50%; 
    height: 30px; 
} 

Answer 2

一个简单的方法是每一列进行打包物品放入单独的div。您的.box和.one，.two，.three css声明是干扰性的。

[http://jsfiddle.net/grLyvomy/][1] 

Answer 3

你可以为每一列使用一个单独的div（在你的案例2中）。

.container{ 
 
    border: 1px black solid; 
 
    width: 320px; 
 
} 
 
.clear{ 
 
    clear: both; 
 
} 
 
.leftColumn{ 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.rightColumn{ 
 
    width: 50%; 
 
    float: right; 
 
} 
 

 
.box:nth-child(2n+1){ 
 
    background: green;  
 
    border-bottom: 1px solid red; 
 
} 
 
.box:nth-child(2n){ 
 
    background: red;  
 
    border-bottom: 1px solid green; 
 

 
} 
 
.one{ height: 50px; } 
 
.two { height: 80px; }

<div class="container"> 
 
    <div class="leftColumn"> 
 
     <div class="box one">first</div> 
 
     <div class="box two">second</div> 
 
     <div class="box three">third</div> 
 
    </div> 
 
    <div class="rightColumn"> 
 
     <div class="box else">first</div> 
 
     <div class="box two">second</div> 
 
     <div class="box three">third</div> 
 
     <div class="box four">fourth</div> 
 
     <div class="box one">last</div> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div>

http://jsfiddle.net/nvmcxjpL/8/