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>

为每个col-x设置css（无论是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

在float: left;课程上试试.item。

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

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

1 个答案: