0

我有一个问题，我想有一个通用的解决方案，但我不知道如何正确搜索它。我想要 2 个 div 并排浮动，两者各占 50% 的宽度。现在我想给他们每个人一些填充。发生的情况是，它们环绕，而不是彼此相邻显示，因为它们现在大于 50%。这里有什么窍门？

一些代码：

    #nw_main_line1_l {
      height: 512px;
      width: 50%;
      float: left;
      padding-right: 11px;
      background-color: red;
    }
    #nw_main_line1_r {
      height: 512px;
      width: 50%;
      float: left;
      padding-left: 11px;
      background-color: green;
    }

这里发生的是绿色低于红色。如果我删除填充，一切都很好，它们像例外一样浮动。

亲切的问候 ：）

4

2 回答 2

3

这是由于填充。您可以减少宽度或使用现代方式：

* { box-sizing: border-box; }

更多关于盒子尺寸的信息在这里。

于 2013-07-16T08:45:29.533 回答
0

你基本上自己找到了问题的答案，但没有明确命名。删除填充可以解决问题。如果您将填充换成边框（或同时使用两者），您会注意到框再次损坏。

这是因为至少在 Firefox 的盒子模型中，最终的盒子宽度（例如，一个 div）将是

2 * [Border-Width] + 2 * [Padding-Width] + width

也许您可以使用CSS3 灵活框来方便地规避您的问题。

于 2013-07-16T08:50:19.867 回答