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

一种简单的方法是将每个列项包装到单独的div中。您的.box和.one，.two，.three css声明正在干扰。

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

Answer 2

您可以为每列使用单独的div（在您的情况下为两列）。

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

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

Answer 3

尝试通过将三个div高度20px更改为30px来更改一个和三个div高度总和相同的两个

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

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

3 个答案: