将元素定位在网格中

Question

你需要在620px宽的DIV（.container）中有几个200px宽的DIV（.item）。

• .container DIV应该连续放入3个.item DIV。
• .item DIV应该相距10px。
• .container DIV的边框与紧邻它的.item DIV之间不应有空格。

请参阅下图，以便更好地理解。

你将如何实现它 - 利润，一张桌子......？

Answer 1

你可以尝试以下方法，但这样你就必须添加一个'mask'，但不需要css3，也不需要根据项目的位置添加/删除类（换句话说，不需要任何类型的脚本，只是纯html / css）：

HTML：

<div class='mask'>
    <div class='container'>
        <div class='item'></div>
        <div class='item'></div>
        <div class='item'></div>
        <div class='item'></div>
    </div>
</div>

CSS：

 .mask{border:10px solid #ddd;width:620px;overflow:hidden}
 .container{width:630px;background-color:#333;margin-top:-10px;overflow:hidden;float:left}
 .item{float:left;margin-right:10px;width:200px;height:100px;background-color:#4a6b82;margin-top:10px}

在此尝试：Demo

Answer 2

不需要桌子。除非是表格数据，否则就是。

浮动每个div，给它所需的宽度和边距，并确保行中的最后一个div没有此边距。您可以使用类或使用css :nth-child(3)伪选择器来完成此操作。由于缺乏对这个选择器的支持，我会推荐一个类。

还有一件事：如果所有div都具有相同的高度，这样可以正常工作。如果他们不这样做，您可能会在各种浏览器中遇到一些奇怪的定位。解决这个问题的最好方法是将每行的三个div放在一行div中。

HTML：

<div class="container">
  <div class="row">
    <div class="item"/>
    <div class="item"/>
    <div class="item last"/>
  </div>
  <div class="row">
    <div class="item"/>
    <div class="item"/>
  </div>
</div>

CSS：

.item { float: left; width: 200px; margin-right: 10px; }
.last { margin-right: 0; }