只有內部邊框的容器

如何創建只有內部邊框/填充的容器。例如，它應該輸出以下：只有內部邊框的容器

enter image description here

樣品標記：

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

CSS：

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

（在上述中，.item將被輸出9倍）。

這需要IE8 +兼容，並使用最有效的方法完成。

來源

2014-02-27 GSTAR

我不知道你怎麼會想到來評估效率。它只會是最有效的方法，直到有其他事情出現。 5分鐘吸收... 4分鐘吸收。 – RacerNerd

你提供的標記基本上只是要求我們爲你做。 Perhpas你可以做一個小提琴，或者給它一個誠實的去，並回來遇到任何問題 – agconti

如果你有在輸出控制，你可以給元素類

<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 ..

希望這會有所幫助

來源

2014-02-27 00:54:40

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

來源

2014-02-27 00:58:39 jingyinggong

只有內部邊框的容器

回答

相關問題