响应式网格系统 - 他们为什么不排队？

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;。