響應式網格系統 - 他們爲什麼不排隊？

Question

我製作了一個使用3列布局的響應式網格系統。所以一些網格框是2列寬，大多數是1列寬。

這是工作找到，直到我把內容放入每個框中，現在「有你的說法」框比其他所有框都更進一步。我試過玩盒子的寬度但沒有改變？

如果有人能幫助，我會很感激！

http://fh80.student.eda.kent.ac.uk/fyp/#

這是網格如何工作：

<div id="grid"> 
    <!- first line is 1, 1, 1 --> 
    <div class="item col-1 sports"> 
     content 
    </div> 
    <div class="item athletes col-1"> 
     content 
    </div> 
    <div class="item venues col-1 last"> 
     content 
    </div> 
    <!-- second line is a 2 and a 1 --> 
    <div class="item col-2"> 
     content 
    </div> 
    <div class="item col-1 parents last"> 
     content 
    </div> 
</div> 

CSS中設置每個COL-X（無論是1寬，寬2或3寬）。保證金適用於右邊，任何行的「最後」沒有保證金。

#grid .item{ 
    background: rgb(255, 255, 255); 
    background: rgba(255, 255, 255, .8); 
    display:inline-block; 
    min-height:300px; 
    margin-right:3%; 
    margin-bottom:3%; 
    padding:1%; 
    position:relative; 
} 

#grid .item.col-1{width:29%;} 
#grid .item.col-2{width:63.4%;} 
#grid .item.col-3{width:97.6%;} 

#grid .item.last{margin-right:0;} 

Answer 1

您.item類嘗試float: left;。

注意：您也可以刪除diplay: inline-block;。