1

我想创建两列 div 元素,一列浮动在左侧,一列在右侧。我希望所有左边的都堆叠在一起,右边的也一样。但是,我看到右侧列中的 div 之间的空间似乎来自左侧的高度。我怎样才能把它放在中间没有空格?示例是http://jsfiddle.net/acugV/

<style type="text/css">
div {
    width: 50px;
    outline: 1px dashed #666
}
.left {
    float: left;
    clear: left;
    background: yellow
}
.right {
    float: right;
    clear: right;
    background: #0f0
}
</style>
<div class="left" style="height:75px"></div>
<div class="right" style="height:50px"></div>
<div class="left" style="height:50px"></div>
<div class="right" style="height:50px"></div>
4

1 回答 1

1

最简单的方法是围绕浮动的 div 创建一个容器,而不是单独浮动每个容器。

<div class="left">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
<div class="right">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

http://jsfiddle.net/acugV/5/

于 2013-08-21T22:04:06.517 回答