css圣杯布局和双飞翼布局
2019-07-05 本文已影响0人
希染丶
为了实现一个两侧宽度固定，中间宽度自适应的三栏布局
圣杯布局
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
假设，左侧宽200px，右侧宽150px；则首先在container上设置
#container {
padding-left: 200px;
padding-right: 150px;
}
随后分别为三列设置宽度和浮动，同时对footer设置清除浮动
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
根据浮动特性，由于center宽度为100%；即占据了第一行所有空间，所以left和right都被挤到第二行
接下来将left放置到之前预留的位置上，使用负外边距
#left {
width: 200px;
margin-left: -100%;
}
现在left出现在center的左侧，随后需要使用定位,将left放到了目标位置
#left {
width: 200px;
margin-left: -100%;
position: relative;
left: -200px;
}
对right只需要添加一条声明
#right {
width: 150px;
margin-right: -150px;
}
注意：最后一个问题，需要给body添加最小宽度，保证页面正常显示
body {
min-width: 550px;
}
综上：圣杯布局css代码
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
双飞翼布局（来源于淘宝UED）
dom结构
<body>
<div id="container">
<div id="middleDiv">
<div id="content">中栏</div>
</div>
<div id="leftDiv">左栏</div>
<div id="rightDiv">右栏</div>
</div>
</body>
创新点在于额外为中栏添加一个子div存放其内容
仍然使用float对div进行浮动
#leftDiv,#middleDiv,#rightDiv {
float: left;
}
与圣杯类似，设置middleDIV宽度为100%；且将leftdiv拉到最左侧，rightdiv做类似处理
#middleDiv {
width: 100%;
}
#leftDiv {
margin-left: -100%;
}
#rightDiv {
margin-left: -300px;
}
对middleDiv处理
#content{
margin : 0 300px;
}
总结
<body>
<style>
#middleDiv {
width: 100%;
}
#leftDiv {
margin-left: -100%;
}
#rightDiv {
margin-left: -300px;
}
#content{
margin : 0 300px;
}
</style>
<div id="container">
<div id="middleDiv">
<div id="content">中栏</div>
</div>
<div id="leftDiv">左栏</div>
<div id="rightDiv">右栏</div>
</div>
</body
