左右自适应高度的两列布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.main { width:200px; background:blue; }
.content { float:right; margin-right:-200px; width:200px; background:#333; color:#fff; }
.relative { float:left; margin-left:-200px; width:200px; background:#ccc; color:#000; }
.clear { clear:both; }
</style>
</head>
<body>
<div class="main">
<div class="content">
<div class="relative">福表姐与我念书部分<br />福表姐与我念书部分<br />福表姐与我念书部分<br />福表姐与我念书部分<br /></div>
<div>这是一个高度只是因的事了</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
将 .main 的背景颜色与 .relative 的背景颜色统一。
浙公网安备 33010602011771号