IT狗

三栏结构(圣杯结构和双飞翼结构)

1.圣杯结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯结构</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
height: 200px;
overflow: hidden;
padding: 0 200px;
}
.middle,.left,.right{
float: left;
height: 200px;
position: relative;
}
.middle{
width: 100%;
background: #c4c4c4;
}
.left{
width: 200px;
background: blue;
margin-left: -100%;
left: -200px;
}
.right{
width: 200px;
background: green;
margin-left: -200px;
right: -200px;
}




</style>
</head>
<body>
<div class="container">
<div class="middle">中心内容局部自顺应</div>
<div class="left">左边栏</div>
<div class="right">左边栏</div>
</div>


</body>
</html>


2.双飞翼结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
height: 200px;
overflow: hidden;
}
.middle,.left,.right{
height: 200px;
}
.mainBox{
width: 100%;
float: left;
}
.middle{
margin: 0 200px;
background: #c4c4c4;
}
.left{
width: 200px;
float: left;
background: blue;
margin-left: -100%;
}
.right{
width: 200px;
float: left;
background: green;
margin-left: -200px;
}




</style>
</head>
<body>
<div class="container">
<div class="mainBox">
<div class="middle">中心内容局部自顺应</div>
</div>
<div class="left">左边栏</div>
<div class="right">左边栏</div>
</div>
</body>
</html>

相反:圣杯结构和双飞翼结构的完成思绪都是经过margin或padding的负值使三栏傍边的元素占领肯定的空间流,从而完成左左边栏牢固,中心内容局部自顺应。

不一样:

(1)圣杯结构还须要在父元素内设置position:relative;和padding肯定的数值,子元素内设置left或right值,从而调解左左边栏的地位。

(2)双飞翼结构就不消在设置position:relative,可是须要在主内容地区外层在套一层div,并设置margin值就可以了。

上风:这样结构的上风是可以在页面加载时,优先加载中心内容地区。

留意:须要在结构时把中心内容地区,写在最上方。

此文由 IT狗 编辑,本网站所发布展示的作品/文章版权归原作者所有,任何商业用途均须联系作者!

相关推荐

评论 暂无评论