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>3列布局左右自适应中间固定</title>
<style type="text/css">
body {
font-size:12px; margin:0px; padding:0px; color:#666; line-height:20px; background-color:#f4f4f4;
}
div,li,ol,ul,p {
margin:0px; padding:0px;
}
.top {
width:900px; margin:0 auto; padding:0 3px; background-color:#fff; height:100px; line-height:100px; font-size:20px; color:#FF9900; text-align:center;
}
.bottom {
width:900px; margin:0 auto; padding:0 3px; border-top:1px solid #ccc; background-color:#fff; height:120px; line-height:120px; font-size:20px; color: #CC0000; text-align:center;
}
.center { width:900px; margin:0 auto; padding:0px 3px; background-color:#fff; color:#fff; background-color:#666666}
.clear { clear:both;}/*这个是清除浮动样式,当用到float这个属性进行左右排版的时候,一样要到他们最下面加上清除浮动的样式*/
.c_left {
float: left; width:250px; background-color:#0099FF; margin-bottom:10px;
}
.c_middle {
float:left; width:380px; background-color:#CC3333; margin-bottom:10px; padding:10px; height:300px;
}
.c_right {
float:right; width:250px; background-color:#660000; margin-bottom:10px;
}
</style>
</head>
<body>
<!--top-->
<div class="top">页面头部</div>
<!--top-->
<!--center-->
<div class="center">
<div class="c_left">我是自适应的高度,随便你加文字<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1</div>
<div class="c_middle">我是固定高度的。假如你你想让这三个块底部一样齐,呵呵,这个不难的,你可以把这个3个块做一个大背景,让他沿着y轴背景重复就OK了</div>
<div class="c_right">我是自适应的高度,随便你加文字<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2<br />2</div>
<div class="clear"></div>
</div>
<!--center-->
<!--bottom--> <div class="bottom">页面底部文件</div> <!--bottom--> </body> </html>
3列布局左右自适应中间固定
最新推荐文章于 2022-07-22 09:05:20 发布