html – 浮动左右比包装div大？

概述参见英文答案 > Why does CSS padding increase size of element?                                    6个 我正在尝试在我的电子邮件模板中创建彩色列部分.我遇到的问题是包含所有电子邮件内容的内容包装器是根据下面的代码设置的.同样,包括浮动列CSS. #content { background-color: whit @H_502_6@ 参见英文答案 > Why does CSS padding increase size of element?                                    6个
我正在尝试在我的电子邮件模板中创建彩色列部分.我遇到的问题是包含所有电子邮件内容的内容包装器是根据下面的代码设置的.同样,包括浮动列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 >      <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 >      <p>           Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.      </p>    </div><div ></div></div>

如您所见,内容包装器的宽度为：600px;,每列为300px.那么你会期望列将填充包装器宽度的100％,其间没有空间.将宽度设为50％是同样的问题.所以,某种程度上,#content显示的比它应该的要小.

如何编辑它以使每列真正占据内容宽度的50％？

结果是这样的：

解决方法 这是因为你有宽度和填充.

如果你将box-sizing: border-box;添加到.blueleft和.blueRight,它应该修复你的宽度问题.

有关其工作原理和方式的更多信息,请参见MDN documentation on the CSS Box Model.

总结

以上是内存溢出为你收集整理的html – 浮动左右比包装div大？全部内容，希望文章能够帮你解决html – 浮动左右比包装div大？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。