HTML/CSS:制作两个高度相同的浮动div

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (45)

我目前使用a解决了一个小问题table,见下文。基本上,我想要两个div占用可用宽度的100%,但只占用尽可能多的垂直空间(这在图片中并不那么明显)。如图所示,两者应始终具有完全相同的高度,并在它们之间留有一条细线。

旧文本http://pici.se/pictures/qJRMtoLPv.png

这很容易做到table,我现在正在使用。不过,我并不太热衷于解决方案,因为从语义上讲,这实际上并不是桌面。

提问于
用户回答回答于

你可以在CSS中获得等高的列,方法是应用大量的底部填充,相同数量的底部负边距,并在列周围加上一个隐藏溢出的div。

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

我已经在所有的现代浏览器FF3+Opera 9+ChromeSafari 3+和IE6/7/8中测试了这一点。它的工作很好。

扫码关注云+社区

领取腾讯云代金券