圣杯和双飞翼布局
圣杯布局
一、目的
- 两侧内容宽度固定,中间内容宽度自适应
- 三栏布局中间一栏优先加载和渲染
二、实现方法
float + margin
(1) 初始化html文件
<div id="header">Header</div>
<div id="content">
<div id="center" class="column">Center</div>
<div id="left" class="column">Left</div>
<div id="right" class="column">Right</div>
</div>
<div id="footer">Footer</div>
给content
设置宽度100%
#content #center {
width: 100%;
}
给footer
设置消除浮动
#footer {
clear: both;
}
(2) 添加float
属性
给left
, center
, right
添加float
属性
#content .column {
float: left;
}
(3) 给content
设置左右padding
左右padding
的值等于左右栏的定宽
#content {
padding-left: 300px;
padding-right: 200px;
}
(4) 设置左边栏
- 设置
margin-left: -100%
(此时移动到center
里面最左端) - 通过相对定位调整:
- 设置
position: relative
- 设置
right: 300px
(此时移动到center
外面最左端)
- 设置
#content #left {
position: relative;
width: 300px;
margin-left: -100%;
right: 300px;
}
(5) 设置右边栏
右边栏只需要设置margin-right:-200px
就可以移动到center
外面最右边。
margin
负值是指对其他元素来说不占空间,本来需要换行显示的,相当于不占空间之后,则可以显示到center的右边
#content #right {
width: 200px;
margin-right: -200px;
}
双飞翼布局
双飞翼布局和圣杯布局很类似,不过是在main的div里又插入一个div,通过调整内部div的margin值,实现中间栏自适应,内容写到内部div中。
实现
(1) 初始化html文件
<h1>双飞翼布局</h1>
<div id="main" class="column">
<div id="mian-wrapper">Main</div>
</div>
<div id="left" class="column">Left</div>
<div id="right" class="column">Right</div>
(2) 给left
, right
添加float
属性
.column {
float: left;
}
(3) 给main-wrapper
设置margin
#mian-wrapper {
margin-left: 100px;
margin-right: 50px;
}
(4) 设置左边栏
#left {
width: 100px;
margin-left: -100%;
}
(5) 设置右边栏
#right {
width: 50px;
/*是因为同行挤不下才到下一行的,往左移动50px即可*/
margin-left: -50px;
}
完整代码
圣杯布局
<style>
body {
min-width: 500px;
}
div {
text-align: center;
}
#content {
padding-left: 300px;
padding-right: 200px;
}
#content #center {
width: 100%;
}
#content #left {
/*注意这里的position: relative*/
position: relative;
width: 300px;
margin-left: -100%;
right: 300px;
}
#content #right {
width: 200px;
margin-right: -200px;
}
#content .column {
float: left;
}
#footer {
clear: both;
}
</style>
<body>
<h1>圣杯布局</h1>
<div id="header">Header</div>
<div id="content">
<div id="center" class="column">Center</div>
<div id="left" class="column">Left</div>
<div id="right" class="column">Right</div>
</div>
<div id="footer">Footer</div>
</body>
双飞翼布局
<style>
div {
text-align: center;
}
#main {
width: 100%;
}
#mian-wrapper {
margin-left: 100px;
margin-right: 50px;
}
#left {
width: 100px;
margin-left: -100%;
}
#right {
width: 50px;
/*注意这里是margin-left*/
margin-left: -50px;
}
.column {
float: left;
}
</style>
</head>
<body>
<h1>双飞翼布局</h1>
<div id="main" class="column">
<div id="mian-wrapper">Main</div>
</div>
<div id="left" class="column">Left</div>
<div id="right" class="column">Right</div>
</body>