我想以某种方式对齐某些div。为了帮助调试正在发生的事情，我决定向divs添加边界以研究它们如何定位。但边界看起来很奇怪。这里的HTML：奇怪的DIV边框显示

enter image description here

这里的CSS：

enter image description here

而这里的结果：

enter image description here

我在做什么错？谢谢！

来源

2012-05-07 septerr

定义：“奇怪”。并定义：“最优” –

它看起来像div有一个宽度（可能是100px），但没有高度。只需在这个页面上的JavaScript控制台*中输入*并查看标题：'$（“h1”）。height（0）.css（“border”，“.2em dotted＃900”）;' –

将HTML和CSS粘贴为文本而不是文本图片？另外，发布一个[实时演示]（http://jsfiddle.net/），展示代码的行动。 –

这并不好笑（!!）。该div似乎有0高度，因此顶部和底部的边界相互接触，形成一个有趣的（??）外观。

该div似乎包含内容，但内容可能是浮动或绝对定位的，因此它不会纵向拉伸有趣（！？）div。

demo here

来源

2012-05-07 14:51:47

高度是问题所在。设置高度解决了问题。感谢所有的帮助！并且，为发布图片而不是文字道歉。而且我知道我可以用jsfiddle来发布问题。再次感谢！ – septerr

你有一个很好的资源，了解divs的建议。他们似乎在浮动，绝对/相对定位等方面不直观。谢谢！ – septerr

CSS规则对HTML的行为在[W3C网站]（http://www.w3.org/TR/CSS2/visuren.html）上有详细描述;不幸的是，它很难消化。我会建议在Google上搜索CSS定位和布局教程。 http://www.alistapart.com和http://www.cssjuice.com是我个人的最爱。避免www.w3schools.com。 –

高度为做到这一点的一种方式，但它有点hackey，另一种是浮动是周围的其他液浮的div股利：

http://jsfiddle.net/Ewd4x/2/

来源

2012-05-07 15:28:39 Lowkase

谢谢！我真的需要了解divs是如何工作的。对我而言，浮动影响边界的原因并不直观。 – septerr

奇怪的DIV边框显示

回答

demo here

相关问题