左右浮动分栏布局时要记得清除浮动，否则下面的东西会上来哦！
在一行的浮动，之后不需要浮动的时候，记得在中间加上一个清除浮动层：
<div style="clear:both;line-height:0;height:0;font-size:0;"></div>
或：
.clear {clear:both;line-height:0;height:0;font-size:0;}
...
<div class="clear"></div>例：
<?xml version="1.0" encoding="UTF-8" ?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>双栏</title>
<style type="text/css">
body {
text-align: center;
}
#body {
text-align: left;
width: 95%;
margin: 0pt auto;
min-width: 640px; /* IE6 不支持 */
}
#header {
background-color: #def;
}
#content {
}
.left {
float: left;
width: 20%;
}
.right {
float: left;
width: 80%;
}
#foot {
font-size: .8em;
color: #999;
text-align: center;
}
#header, #content, #foot {
}
p, h1 {
margin: 0pt;
padding: 5pt;
}
*, body {
font-family: "Verdana", Geneva, Sans-Serif;
/*font-size: 10pt;*/
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="body">
<div id="header">
<h1>Header</h1>
<p>this is the header</p>
</div>
<div id="content">
<div class="left">
<p>Left</p>
<p>Left</p>
<p>Left</p>
<p>Left</p>
<p>Left</p>
<p>Left</p>
<p>Left</p>
Left
</div>
<div class="right">
<p>Right</p>
<p>Right</p>
<p>Right</p>
Right<br />
Right<br />
Right<br />
</div>
</div>
<!-- 去掉下面这行试试 -->
<div style="clear:both;line-height:0;height:0;font-size:0;"></div>
<div id="foot">
Copyright © 2008, h_Davy; Powered by: VIM;
</div>
</div>
</body>
</html>
//EOF
0 comments:
Post a Comment