您的位置：首页 > 其它

圣杯布局

2016-02-29 14:18 232 查看

先看看效果（1）左边固定宽度，右边自适应

<!DOCTYPE html>
<html>
<head>
<title>shengbei</title>
<meta charset="utf-8" />
<style type="text/css">
*{
margin:0px;
padding: 0px;
}

p{
padding: 20px;
}
#container{
margin:0 auto;
width: 1000px;
overflow: hidden;
padding-left: 210px;
text-align: center;
}
#main{
float: left;
width: 100%;
background: yellow;
}
#aside{

float: left;
margin-left:-100%;
width: 200px;
position:relative;
left:-210px;
background: red;

}
</style>
</head>
<body>
<div id="container">
<div id="main"><p>主栏目</p></div>
<div id="aside"><p>左侧栏目</p></div>
</div>
</body>
</html>

基本原理：1.首先在一个大的container里包含2个div；

　　　　　2.设置主窗口左浮动float，且窗口宽度为100%；（主窗口占据div的全部宽度，这样左窗口即使浮动也会被挤压到下一行，第2步解决该问题）

　　　　　3.设置左侧窗口左浮动float，设置左外边距为-100%；（这样可以使左窗口与主窗口在一行上，但是此时左窗口会覆盖主窗口一部分，第4’5步解决该问题）

　　　　　4.设置container容器的padding-left为210px，稍微大于左窗口，同时留出2个窗口的外边距

　　　　　5.最后设置左窗口的的位置position设置为relative，left=-210px，使其紧靠container的左侧，同时与主窗口有一定的外边距。

再看效果（2）右窗口固定宽度，主窗口自适应

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin:0px;
}
p{
padding: 20px;
}
#container{
width:1000px;
margin:0 auto;
padding-right: 210px;
}
#main{
width:100%;
float: left;
background: red;
}
#aside{
float: left;
width:200px;
margin-left: -200px;
background: yellow;
position: relative;
right:-210px;
}
</style>
</head>
<body>
<div id="container">
<div id="main"><p>主栏目</p></div>
<div id="aside"><p>测栏目</p></div>
</div>
</body>
</html>

基本原理：

　　　　　1.首先在一个大的container里包含2个div；

　　　　　2.设置主窗口左浮动float，且窗口宽度为100%；（主窗口占据div的全部宽度，这样右窗口即使浮动也会被挤压到下一行，第2步解决该问题）

　　　　　3.设置右窗口左浮动float，设置左外边距为-200px；（这样可以使右窗口与主窗口在一行上，但是此时右窗口会覆盖主窗口一部分，第4’5步解决该问题）

　　　　　4.设置container容器的padding-left为210px，稍微大于左窗口，同时留出2个窗口的外边距

　　　　　5.最后设置左窗口的的位置position设置为relative，left=-210px，使其紧靠container的左侧，同时与主窗口有一定的外边距。

2种布局的基本原理一致。

转载请注明出处，谢谢

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

标签：

相关文章推荐

新的分享

章节导航