您的位置：首页 > Web前端 > CSS

CSS之圣杯布局与双飞翼布局

2016-02-06 11:20 561 查看

圣杯布局

三行等高

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="docm.css">
</head>
<body>
<div id="page">
<div id="hd"></div>
<div id="bd">
<div class="main">1231111<p>我我我</p><p>我我我</p><p>我我我</p><p>我我我</p></div>
<div class="sub">11222</div>
<div class="extra">456</div>
</div>
<div id="ft"></div>
</div>
</body>
</html>

css:（在.bd中设置内边距，然后在.sub和.extra中设置负边距把中间的内容显示出来）

*{
margin: 0;
padding: 0;
}
#hd{
width: 100%;
height: 100px;
background-color: #FC3D83;
}
.main {
float: left;
width: 100%; //中间内容自适应
background-color: #ccc;
padding-bottom: 9999px; //把内容撑出去后又收回来形成等高
margin-bottom: -9999px; //把内容撑出去后又收回来形成等高
}
.sub {
float: left;
width: 190px;
margin-left: -100%; //将内容设置到左边
background-color: #ED1E25;
padding-bottom: 9999px;
margin-bottom: -9999px;
position: relative; //设置相对位置来配放，而双飞翼不设置
left: -190px; //在.bd中设置内边距，然后在.sub和.extra中设置负边距把中间的内容显示出来
}
.extra {
float: left;
width: 190px;
margin-left: -190px; //将内容设置到右边
background-color: #f0f;
padding-bottom: 9999px;
margin-bottom: -9999px;
position: relative; //设置相对位置来配放，而双飞翼不设置
right: -190px; //在.bd中设置内边距，然后在.sub和.extra中设置负边距把中间的内容显示出来
}
#bd {
padding: 0 190px 0 190px; //在.bd中设置内边距，然后在.sub和.extra中设置负边距把中间的内容显示出来
background-color: #ff0;
overflow: hidden; //超出内容隐藏，等高的设置
}
#ft{
width: 100%;
height: 100px;
background-color: #5880F4;
}

效果如图：

---------------------------------------------分割线看什么看-------------------------------------------------------------

双飞翼布局

上面的圣杯布局其实已经挺好的，但是因为用了相对定位，所以对于布局就不太稳定，那么如何不用相对定位来实现这个效果呢，于是就有了双飞翼布局，在mian主要内容中加一个盒子包裹，再用margin-left使内容显示出来。

三行等高

HTML:

<div id="page">
<div id="hd"></div>
<div id="bd">
<div class="main"><div class="inside">1231111</div></div>
<div class="sub">234<p>我我我<p/><p>我我我<p/><p>我我我<p/><p>我我我<p/></div>
<div class="extra">456</div>
</div>
<div id="ft"></div>
</div>

CSS：

*{
margin: 0;
padding: 0;
}

#hd{
width: 100%;
height: 100px;
background-color: #FC3D83;
}
.main {
float: left;
width: 100%; //自适应
background-color: #ccc;
padding-bottom: 9999px; //把内容撑出去后又收回来形成等高
margin-bottom: -9999px; //把内容撑出去后又收回来形成等高
}
.sub {
float: left;
width: 190px;
margin-left: -100%;
background-color: #ED1E25;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.extra {
float: left;
width: 190px;
margin-left: -190px;
background-color: #f0f;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
#bd {
background-color: #ff0;
overflow: hidden; 　　//超出的内容隐藏
}
.inside{
margin: 0 190px; //中间最里的盒子设置外边距把内容显示出来
}

#ft{
width: 100%;
height: 200px;
background-color: #5880F4;
}

效果如图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航