顯示3盒內嵌響應式CSS

Question

我試圖顯示3個盒子內嵌對方的所有等寬，然後隨着頁面變小而變小，然後當它變得對於所有3個盒子太小，對於它們全部顯示彼此之間100％寬度。

撥弄全碼：http://jsfiddle.net/tBX6H/

CSS

.cont { 
    width:80%; 
    margin:0 auto 0 auto; 
} 

.box-container { 
    width:100%; 
    padding:5px; 
} 

.icon-box { 
    margin-left: 45px; 
    width:33%; 
    display:inline; 
    float:left; 
} 

HTML

<div class="cont"> 

<!-- Icon Box Container --> 
<div class="box-container"> 

<div class="icon-box"> 
<h4>BOX</h4> 
<p>content here</p> 
</div> 

<div class="icon-box"> 
<h4>BOX</h4> 
<p>content here</p> 
</div> 

<div class="icon-box"> 
<h4>BOX</h4> 
<p>content here</p> 
</div> 

<br class="clearfloat"> 

<div class="icon-box"> 
<h4>BOX</h4> 
<p>content here</p> 
</div> 

<div class="icon-box"> 
<h4>BOX</h4> 
<p>content here</p> 
</div> 

<div class="icon-box"> 
<h4>BOX</h4> 
<p>content here</p> 
</div> 

</div><!-- cont --> 

Answer 1

看起來你的問題是，你有45像素保證金，你必須在使用內聯元素時考慮到這一點。

退房https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

如何，所有的作品一些有用的信息。

繼承人你的例子： http://jsfiddle.net/MzEPN/

繼承人應該是什麼： http://jsfiddle.net/MzEPN/1/

.icon-box { 
    width:33%; 
    display:inline; 
    float:left; 
    background:red; 
}