圣杯布局和双飞翼布局
2018-09-10 01:12:57来源:博客园 阅读 ()
一、圣杯布局(两边固定,中间自适应)
html:
<div class="container">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
css:
*{
margin:0;
padding:0;
}
.container{
padding:0 100px 0 200px;
overflow:hidden;
}
.left,.middle,.right{
position:relative;
float:left;
min-height:200px;
}
.left{
margin-left:-100%;
left:-200px;
width:200px;
background:#ccc
}
.middle{
width:100%;
background:red;
}
.right{
margin-left:-100px;
right:-100px;
width:100px;
background:green
}
二、双飞翼布局
html
<div class="container">
<div class="middle">
<div class="middleInner">middle</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
css
*{
margin:0;
padding:0;
}
.middle,.left,.right{
float:left;
min-height:200px;
}
.left{
width:100px;
margin-left:-100%;
background:red;
}
.right{
width:200px;
margin-left:-200px;
background:blue;
}
.middle{
width:100%
}
.middleInner{
margin:0 200px 0 100px;
min-height:200px;
background:green;
}
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS Grid 布局 2020-06-01
- 构建一个杂志布局(译文) 2020-05-14
- 【2020Python修炼记】前端开发之 CSS基础布局 2020-05-13
- HTML连载86-添加视频、伸缩布局 2020-05-06
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash