我想做一个网页，用3个DIV实现一行三列的分栏效果，那么我的3个DIV应该怎样浮动呢？？？
http://www.w3cn.org/article/layout/index.html
float:left;
<!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=gb2312" />
<title>无标题文档 </title>
<style type="text/css">
body{margin:0;padding:0;}
div{margin:0;padding:0;height:500px;}
.main {background:orange;position:absolute;top:10px;width:100%;}
.left {background:red;float:left;left:10px;position:relative;width:300px;}
.center{background:green;left:320px;min-width:340px;right:320px;position:absolute;word-wrap:break-word;word-break：break-all}
.right {background:red;float:right;right:10px;position:absolute;width:300px;}
</style>
</head>
<body>
<div class="main">
<div class="left">left </div>
<div class="center">center </div>
<div class="right">right </div>
</div>
</body>
</html>
这个可以实现你要的效果。
这是使用相对定位和绝对定位的方法实现的，那要是不使用定位全部使用浮动定位呢？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>一行三列 </title>
<style type="text/css">
.parent{
width : 80%;
height : 80%;
border:1px solid #44aaee;
margin:10% 10% 10% 10%;
}
</style>
</head>
<body>
<div class="parent">
<div style="border:1px solid #123456; width:40%; height:100%; float:left;">sfa </div>
<div style="border:1px solid #123456; width:30%; height:100%; float:left;">sfas </div>
<div style="border:1px solid #123456; width:30%; height:100%;float:left;">sdf </div>
</div>
</body>
</html>
html
HTML code
<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">
<h1>Recipe for Sucess</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lectus tortor, varius sed, tincidunt eu, egestas a, ipsum.
Sed mattis, orci eu porta facilisis, purus ipsum mollis nibh, eu laoreet wisi purus a sem. Pellentesque tortor sapien, sodales eu,
feugiat eget, pulvinar quis, erat. Nulla congue dui. Pellentesque molis bibendum tortor. Cras volutpat ipsum ac sapien.</p>
<p>Quisque sodales imperdiet enim. Quisque cursus turpis vitae mi. Proin fermentum, arcu ac fringilla consequat, ipsum turpis dignissim ipsum,
sed pellentesque lacus eros vel nisl. Nullam iaculis. Duis sit amet nunc. Vivamus lectus nisl, Nullam iaculis. Proin fermentum, arcu ac fringilla consequat,
ipsum turpis dignissim ipsum, sed pellentesque lacus eros vel nisl. Nullam iaculis. Duis sit amet nunc. Vivamus lectus nisl, Nullam iaculis.
</p>
</div>
<div id="side1">
<h3>Search the Recipes</h3>
<form method="post" action="">
<input type="text" name="textfield" class="text" /><br />
<input type="submit" name="Submit" value="Submit" />
</form>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="side2">
<h3>Please Visit our Sponsors</h3>
<div class="adbox"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lectus tortor, varius sed, tincidunt eu, egestas a, ipsum.</p></div>
<div class="adbox"><p>Sed mattis, orci eu porta facilisis, purus ipsum molis nibh, eu laoreet wisi purus a sem. Pellentesque tortor sapien, sodales eu, feugiat eget, pulvinar quis, erat.</p></div>
<div class="adbox"><p>Quisque mauris nunc, mattis vitae, dictum et, consectetuer tincidunt, nunc. Aenean pellentesque metus sed magna. Praesent vulpulate</p></div>
</div>
</body>
</html>
CSS
CSS code
body {
margin:0;
padding:0;
background-image:url();
background-repeat:no-repeat;
background-color:#FFFFFF;
}
p {
font:80%/1.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
padding-top:0;
margin-top:0;
}
form {
margin:0;
padding:0;
}
#content {
margin:66px 260px 0px 240px;
padding:10px;
}
#content h1 {
text-align:right;
padding-right:20px;
font:150% Georgia, "Times New Roman", Times, serif;
color:#901602;
}
#side1 {
position:absolute;
width:200px;
top:30px;
left:10px;
padding:70px 10px 10px 10px;
}
#side2 {
position:absolute;
width:220px;
top:30px;
right:10px;
padding:70px 10px 10px 10px;
border-left:1px dotted #cccccc;
background-image:url();
background-position:top right;
background-repeat:no-repeat;
}
#side2 h3 {
font:110% Georgia, "Times New Roman", Times, serif;
margin:0;
padding-bottom:4px;
}
.adbox {
padding:2px 4px 2px 6px;
margin:0 0 10px 0;
border:1px dotted #b1b1b1;
background-color:#f4f4f4;
}
#side1 h3 {
font:110% Georgia, "Times New Roman", Times, serif;
color:#621313;
background-color:transparent;
margin:0;
padding-bottom:4px;
}
#side1 .txt {
width:184px;
background-color:#FCF5F5;
border:1px inset #901602;
}
#side1 ul {
list-style:none;
margin-left:0;
padding-left:0;
width184px;
}
#side li {
font:80% Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-bottom:0.3em;
border-bottom:1px solid #E7AFAF;
}
#side1 a:link, #side1 a:visited {
text-decoration:none;
color:#901602;
background-color:transparent;
}
#side1 a:hover {
color:#621313;
}
