在下面的代码中,我希望带有“y”的 div 与带有 3 个“x”的 div 的高度相匹配。
<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;">
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;">
x<br/>x<br/>x
</div>
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;">
y
</div>
需要注意的是内部 div 是浮动的。
我在 A List Apart 看到了一个解决方案(我认为),您可以为两个内部列提供巨大的底部填充,但与负边距具有相同的巨大值。只要列的高度不超过 32000 像素,这一切都有效,这种情况很少见。就像是:
.col {
float: left;
padding-bottom: 32000px;
margin-bottom: -32000px;
}
...其中“col”是任何列的类名称。然后,您可以使用单独的类来设置各个列的样式。
<div class="col xxx">x<br />x<br />x</div>
<div class="col yyy">y</div>
另一种选择是在外部 div 上使用背景图像,包括边框等。这种方法显然意味着设置后更改列(宽度、颜色)会更困难。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)