仅带内边框的容器

Question

如何创建仅具有INNER边框/填充的容器。例如，它应输出以下内容：

示例标记：

<div id="container">
    <div class="item">
         <!-- content -->
    </div>
</div>

CSS：

#container { width: 960px; }
.item { float: left; width: 300px; height: 100px; }

（在上面，.item将输出9次）。

这需要与IE8 +兼容并使用最有效的方法完成。

Answer 1

如果你可以控制输出，你可以给出元素类

<div id="container">
    <div class="item item-1">
         <!-- content -->
    </div>
    <div class="item item-2">
         <!-- content -->
    </div>
    <div class="item item-3">
         <!-- content -->
    </div>
</div>

然后使用

.item { width: 300px; height: 100px; float: left;}
.item-2 { margin: 0 20px; }
.items-secondrow { margin: 20px }
.items-secondrow-block-2 { margin: 20px 20px; }

如果您没有控制权（并且更容易，但在旧版本的IE中不受支持）

.item:nth-child(1) { //code }
.item:nth-child(2) { //code }
//etc ..

希望这有帮助

Answer 2

HTML：

<div id="container">
  <div class="itemList">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</div>

的CSS：

#container { width: 960px; }
.itemList { margin-left: -30px; margin-bottom: -30px;}
.item { float: left; width:298px; border: 1px solid #000; margin-left: 30px; margin-bottom:30px; }