爲什麼我得到我的內容之間的這個很大的差距

我有這6列浮動到左邊，所以他們會出現在彼此旁邊，但正如你可以看到演示一旦我增加中間內容的高度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

來源

2014-12-27 CYBERSIX

你在說什麼六列？提琴提供的不符合你的描述 – 2014-12-27 13:28:47

我認爲他是在問砌石 – himanshu 2014-12-27 13:43:13

http://sickdesigner.com/masonry-css-getting-awesome-with-css3/它會幫助，如果你正在尋找砌體的css – himanshu 2014-12-27 13:47:35

你需要在容器中三個不同的列。你在考慮水平線，這是基本的，但你應該首先垂直思考。基本上它歸結爲有3列，然後在那些列高度不同的列。

<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爲例。

來源

2014-12-27 14:50:13

如何在列之間添加邊距？ – CYBERSIX 2014-12-28 02:30:26

像這樣（編輯）[小提琴]（http://jsfiddle.net/cz099s1s/1/）？給元素添加'margin-bottom'是最好的。 – 2014-12-28 19:42:18

爲什麼我得到我的內容之間的這個很大的差距

回答

相關問題