0

.SalesPanel课堂上,我将其设置为 100% 宽度。我注意到它与我在contentid 中设置的右侧的填充重叠。

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

是什么原因造成的以及如何解决?

此外,即使使用 100% 宽度,我也期待 1 行上有 3 个 div .. 如何解决?

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%
}
​
4

4 回答 4

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+ 和所有其他现代浏览器支持。

于 2012-09-29T20:16:44.353 回答
1

试试这个jsFiddle 示例

#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-29T20:18:35.883 回答
0

此外,当您使用其中的 3 个静态时,33% 的宽度也不会受到伤害。

.SalesPanel {
  border:1px solid #dddddd;
  height:30px;
  float:left;
  width: 33%;
}
于 2012-09-29T21:12:48.287 回答
0

试试这个代码:

.SalesPanel {
    border:1px solid #dddddd;
    height:30px;
    float:left;
    width: 33%;
    display:inline-block;
}
于 2012-09-29T22:29:15.490 回答