html – 浮动div和带有垂直边距的标题错误对齐

概述我有以下标记： <div class="twocol float-left"> <h4>left</h4> <p>first</p> <p>second</p> <p>third</p></div><div class="twocol"> <h4>right</h4> <p>foo</p> <p>bar</p> <p>fooba 我有以下标记：

<div >    <h4>left</h4>    <p>first</p>    <p>second</p>    <p>third</p></div><div >    <h4>right</h4>    <p>foo</p>    <p>bar</p>    <p>foobar</p></div>​

CSS：

.twocol {    margin-right: 1em;}.float-left {    float: left;}h4 {    margin: 1em 0;    Font-weight: bold;}

DEMO

问题

标题的垂直位置应该相等,但“右”是“左”上方1 em.为什么？以及如何解决这个问题？

解决方法 这里的问题是由于利润率下降.默认情况下,身体上有一些边距.当两个边距符合浏览器时,选择两者中较大的一个并应用它.当您浮动一列时,这会破坏折叠边距并且正在应用两个边距.

我为你的小提琴添加了一些背景颜色来说明这一点.
http://jsfiddle.net/Hu5ZH/2/

要了解有关折叠边距的更多信息：
http://www.w3.org/TR/CSS2/box.html#collapsing-margins

总结

以上是内存溢出为你收集整理的html – 浮动div和带有垂直边距的标题错误对齐全部内容，希望文章能够帮你解决html – 浮动div和带有垂直边距的标题错误对齐所遇到的程序开发问题。

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