html三个div相同高度,HTML/CSS：制作两个高度相同的浮动div

慕容708150

您可以在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;}nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   

     

       

Test content

       

longer

     

     

       

Test content

     

   

你不需要额外的元素clear为了清理容器的内部浮子。如果您使用溢出隐藏，这将清除所有非IE浏览器中的浮点数，然后只需添加一些给予hasLayout的内容，例如宽度或缩放：1将导致IE清除其内部浮点数。我已经在所有的现代浏览器FF3+Opera 9+ChromeSafari 3+和IE6/7/8中测试了这一点。这看起来像是一个丑陋的技巧，但它运行良好，我在生产中经常使用它。我希望这能帮到你。