100％寬度弄髒填充

在.SalesPanel類中，我已將它設置爲100％寬度。我注意到它重疊了我在content id中設置的右側填充。100％寬度弄髒填充

請參閱：http://jsfiddle.net/CBAE7/9/並查看正確的填充並將其與左填充進行比較。

是什麼導致了這種情況，以及如何解決？

另外，我期待3行的1行甚至使用100％的寬度..如何解決？

HTML：

<div id='content'> 
    <div class='SalesPanel'> One </div> 
    <div class='SalesPanel'> Two </div> 
    <div class='SalesPanel'> Three </div> 
</div>

CSS：

#content { 
    width: 700px; 
    padding: 8px; 
    overflow: hidden; 
    background-color: white; 
    border: 1px solid #C8CCD5; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 

.SalesPanel { 
    border:1px solid #dddddd; 
    height:30px; 
    float:left; 
    width: 100% 
}

來源

2012-09-29 I' ll-Be-Back

您的jsfiddle並不能反映你的代碼。 – cereallarceny

我已經添加了一個截圖，所以你可以看到我的意思 –

對，你在帖子中列出的小提琴是一個不正確的鏈接。 http://jsfiddle.net/j08691/CBAE7/6是正確的。 – cereallarceny

試試這個jsFiddle example。

#content { 
    width: 700px; 
    padding: 8px; 
    background-color: white; 
    border: 1px solid #C8CCD5; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
.SalesPanel { 
    border:1px solid #dddddd; 
    height:30px; 
    width: 33%; 
    display:inline-block; 
    margin:0; 
}

來源

2012-09-29 20:18:35 j08691

不，我需要'浮動'，因爲我要添加更多的div –

也許在你的問題中顯示最終目標的更好的例子會有所幫助。 – j08691

查看更新的問題請 –

更改box-sizing屬性：中box-sizing對mod

.SalesPanel { 
    /* your stuff */ 
    -moz-box-sizing: border-box; 
     box-sizing: border-box; 
}

初始值ern瀏覽器是content-box。這意味着width: 100%只會影響內容，不包括填充和邊框（您的情況）。通過將此屬性更改爲box-sizing，您可以將它放入容器中。內容的實際寬度將爲calc(100% - 2px)。

它是CSS 3屬性，並受IE 8+和所有其他現代瀏覽器的支持。

來源

2012-09-29 20:16:44 Pavlo

哇，修正了一個問題，我從來沒有聽說過'盒子大小：'以前。 –

您可能想要提及的是，框的大小是CSS3，並不適用於所有瀏覽器。 – j08691

謝謝！查看有關行的更新問題。 –

另外，看到你正在使用其中的靜態3，33％的寬度從來沒有受傷。

.SalesPanel { 
    border:1px solid #dddddd; 
    height:30px; 
    float:left; 
    width: 33%; 
}

來源

2012-09-29 21:12:48

試試這個代碼：

.SalesPanel { 
    border:1px solid #dddddd; 
    height:30px; 
    float:left; 
    width: 33%; 
    display:inline-block; 
}

來源

2012-09-29 22:29:15

100％寬度弄髒填充

回答

相關問題