Question

在.SalesPanel课程中，我将其设置为100％宽度。我注意到它在我content id中设置的右边的填充重叠。

请参阅：http://jsfiddle.net/CBAE7/9/并查看右侧填充并将其与左侧填充进行比较。

造成这种情况的原因以及如何解决？

另外，我期待在1行上有3个div，即使使用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%
}

Answer 1

更改box-sizing属性：

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

现代浏览器box-sizing的初始值为content-box。这意味着width: 100%只会影响内容，而不会计算填充和边框（您的情况）。通过将此属性更改为box-sizing，您将将其放入容器中。内容的实际宽度为calc(100% - 2px)。

它是CSS 3属性，并受IE 8+和所有其他现代浏览器的支持。

Answer 2

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

Answer 3

此外，当您使用静态3时，33％的宽度也不会受到伤害。

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

Answer 4

试用此代码：

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

100％宽度弄乱了填充物

4 个答案: