html - 100% 宽度弄乱了填充

Question

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

参见: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%
}
​

Answer 1

试试这个 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;
}​