你能强制一个容器 DIV 的高度来容纳两个浮动的 div 子元素吗?我可以用一个奇特的技巧来做到这一点吗?我正在尝试在父 div 内制作两个大小相等的 div。我希望它们并排出现,并且它们之间有一点空白。 Child2 往往会弹出并低于 Child1。注意 Child2 包含一个表。我应该漂浮吗?
HTML:
<div id="parent">
<div id="child1"></div>
<div id="child2">
<table><tr><td>content</td></tr></table>
</div>
</div>
CSS:
div#parent
{
background-color: #C6E4E0;
border: solid 3px #017E6F;
font-family: Arial;
font-size: 10pt;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
width:99%;
}
div#parent div
{
width:49%;
float:right;
padding:3px;
}
div#parent div:first-child
{
float:left;
}
这不是一个明确的问题,他的问题是他的两个浮动 div 没有并排出现。
首先,您不需要设置父级 div 的宽度,div 是块元素,这意味着它们会自动调整宽度以占据其父级的整个宽度(在这种情况下,大概 div#parent 的父级是身体)。
因为您明确设置宽度并为其提供填充,所以它可能会超出正文。这并不重要,但如果您将相同的知识应用于子浮动 div,您就会明白为什么正确的 div 可能会被撞到底部。
首先,如果您将 div 的宽度显式设置为百分比,则不需要添加填充。因为您正在处理百分比宽度,所以最好将填充添加到 div 的内容而不是 div 本身,因为填充已添加到宽度。因此,如果您向 100px 父级中宽度为 49% 的 div 添加 10px 内边距,则其宽度将为 49px + 10px + 10px(2 条边),计算得出的总宽度为 69px。
由于您没有发布您的标记和内容或您正在测试的浏览器,我无法确切地说出 div 被降低的原因。有两种可能的可能性。
- 您正在使用 IE,它允许表扩展到其父 div 之外,这将导致损坏。尝试将表宽度显式设置为其父级的百分比或类似的值。
- 49% 宽度 + 填充 = 大于 [parent-width] - [left-div-width]。这将导致它向下碰撞,因为左 div 和右 div 对于父宽度来说太宽。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)