Question

我想创建两列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>

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

页面两侧的DIV元素之间有空格

1 个答案: