html - 为什么我的内容之间会有这么大的差距

Question

我有这 6 列向左浮动，因此它们会彼此相邻出现，但是正如您在演示中看到的那样，一旦我增加了中间内容的高度，4 和 6 也会向下推，但我想保持相同 margin

CSS

.left-side-bar{
    clear: both;
    height: 200px;
    width: 32.26%;
    background-color: gray;
    text-align: center;
    float: left;
    margin-top: 1%;
}

.middle-side-bar{
    height: 340px;
    width: 32.26%;
    background-color: blue;
    text-align: center;
    float: left;
    margin: 1% 0 1% 1.6%;
}

.right-side-bar{
    height: 200px;
    width: 32.26%;
    background-color: yellow;
    text-align: center;
    float: left;    
    margin: 1% 0 1% 1.6%;
}

这些内容可以有不同的高度。这只是为了这个问题，我可能有超过 6 列

正确的 fiddle enter link description here

Answer 1

您需要在容器中制作三个不同的列。你在水平线思考，这是基本的，但你应该首先垂直思考。基本上它归结为有 3 列，然后在这些列中具有不同高度的 div。

<div class="container">
    <div class="left-side-bar red">
        Column 1
    </div>

    <div class='middle-side-bar red'>
        Column 2
    </div>

    <div class='right-side-bar red'>
        Column 3
    </div>
</div>

检查 this fiddle举个例子。