我坚持用下面的东西.我需要制作右上角div 100%的高度(它的bgcolor将覆盖主div的全高).
<body>
<div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;">
<div id="left" style="float: left; width: 600px; background-color: #A7C864;">
<div id="left-top">left-top</div>
<div id="left-bottom">left-bottom</div>
</div>
<div id="right" style="float: right; width: 200px; background-color: #C7E48E;">
<div id="right-top">right-top</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
这里的工作示例:http: //marioosh.net/lay1.html
使用表格很简单:http: //marioosh.net/lay2.html
我可能误解了这个问题(您对基于表格的示例的链接不起作用),但听起来您正在尝试创建两个高度相等的列.您可以使用几种技术,其中有三种:
您可以为每个提供DIV一个较大的底部填充,以及一个同样大但负的底部边距.
#main {
overflow: hidden;
}
#left, #right {
float: left;
padding-bottom: 1000em;
margin-bottom: -1000em;
}
这个解决方案并非没有问题; 如果您尝试链接到其中一列中的元素(例如,您在其中一列中有一个元素id=foo并且链接到该列mypage.html#foo),则布局将中断.使用这种技术添加底部边框也很困难.
来自Natalie Downe的完整示例:http://natbat.net/code/clientside/css/equalColumnsDemo/10.html
您可以为其中一列提供负右边距,另一列为非常宽的左边距.
#left, #right {
float: left;
}
#left {
background: red;
width: 200px;
margin-right: -200px;
}
#right {
border-left: 200px solid red;
}
有关Smashing Magazine的更多信息:http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
您可以通过提供#main包含两列背景的背景图像来伪造它.这种技术称为"Faux Columns",当您需要复杂背景或列之间的装饰边框时,此技术非常有用.
有关A List Apart的更多信息:http://www.alistapart.com/articles/fauxcolumns/
作为该问题的一位评论者,您也可以使用表格.但是,除非您显示表格数据,否则TABLE不是相应的HTML元素.