Question

我有6个向左浮动的列，所以它们会彼此相邻但是你可以看到Demo一旦我增加了中间内容的高度，4和6也会向下推，但我想保持相同保证金

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列

正确的小提琴 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以获取示例。

为什么我的内容之间存在很大的差距

1 个答案: