浮动元素左右宽度大于父级容器div？

Question

浮动元素左右宽度大于父级容器div？

4

我正在尝试在我的电子邮件模板中创建一个带有颜色的列节。我遇到的问题是包含所有电子邮件内容的内容包装器设置如下代码。同样，浮动列CSS也已包含。

#content {
  background-color: white;
  margin: auto;
  width: 600px;
  color: #888;
  font-size: 12px;
  border-radius: .6em .6em 0em 0em;
  box-shadow: 0px 0px 15px 0px #555;
}
.blueLeft {
  background-color: #33ccff;
  float: left;
  display: block;
  width: 300px;
  padding: 20px;
  font-size: 16px;
}
.blueRight {
  background-color: #33ccff;
  float: right;
  display: block;
  width: 300px;
  padding: 20px;
  font-size: 16px;
}
<div id="content">
   <div class="blueLeft">
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p> 
   </div>
   <div class="blueRight">
      <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p> 
   </div><div class="clearFloat"></div>
</div>

如您所见，内容包装器的宽度为width: 600px;，每列宽度都为300px。因此您期望列会占据包装器宽度的100%，中间没有空隙。将宽度设置为50%会出现同样的问题。某种程度上，#content显示得比预期小。

如何编辑才能让每一列真正占据内容宽度的50%呢？

最终效果如下图：

- Tony White

嗨，Tony。在添加代码时，最好尽可能保持简单，并削减所有细节。这是一个例子：https://jsfiddle.net/sheriffderek/6to9fynw/ 你的大纲中存在一些非模块化的重复。也许这会有所帮助。:) - sheriffderek

如果这是一份电子邮件模板，为什么不使用表格呢？表格在电子邮件中得到了很好的支持，而且使用表格可以非常简单地创建一个具有两个等宽列的行。 - Michael Coker

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hanna · Accepted Answer

这是因为你的元素拥有宽度和内边距。

如果在.blueLeft和.blueRight中添加box-sizing: border-box;，这应该可以解决宽度问题。

想要了解更多关于此方法的原理和操作，请查看CSS Box Model的MDN文档。