3列布局左右自适应中间固定

最新推荐文章于 2022-07-22 09:05:20 发布

lutaotony

最新推荐文章于 2022-07-22 09:05:20 发布

阅读量1.2k

点赞数

文章标签： class div float xhtml html c

本文链接：https://blog.csdn.net/lutaotony/article/details/5165113

版权

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>

<div class="top">页面头部</div>


<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>
    
     <div class="bottom">页面底部文件</div>  </body> </html>

lutaotony

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3列布局左右自适应中间固定

HTML code 3列布局左右自适应中间固定 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 {
复制链接

扫一扫