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％宽度弄脏填充

回答

相关问题