效果:
运行代码框
<!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>css</title> <style type="text/css"> <!-- body{ margin:0 100px; padding:0 200px 0 150px; } #container{ background-color:#0ff; float:left; width:100%; border-left:150px solid #0f0; border-right:200px solid #f00; margin-left:-150px; margin-right:-200px; display:inline; /* So IE plays nice */ } #leftRail{ float:left; width:150px; margin-left:-150px; position:relative; } #center{ float:left; width:100%; margin-right:-100%; } #rightRail{ float:right; width:200px; margin-right:-200px; position:relative; } --> </style> </head> <body> <div id="container"> <div id="center">Center Column Content</div> <div id="leftRail">Left<br /> Sidebar</div> <div id="rightRail">Right Sidebar</div> </div> </body> </html>
<div id="container">
<div id="center">CENTER<br />COLUMN CENTER</div>
<div id="leftRail">LEFT RAIL</div>
<div id="rightRail">RIGHT RAIL</div>
</div>
CSS:
#container{
background-color:#0ff;
float:left;
width:500px;
border-left:150px solid #0f0; »
/* The width and color of the left rail */
border-right:200px solid #f00; »
/* The width and color of the right rail */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
position:relative;
}
#center{
float:left;
width:500px;
margin-right:-500px;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
<div id="container">
<div id="content">This is<br />some content</div>
<div id="rail">This is the rail</div>
</div>
CSS:
#container{
background-color:#0ff;
overflow:hidden;
width:750px;
}
#content{
background-color:#0ff;
width:600px;
border-right:150px solid #f00; »
/* The width and color of the rail */
margin-right:-150px; /* Hat tip to Ryan Brill */
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
}
