左右两栏固定高度,中间部分自适应的三栏布局。一个像圣杯/展翅的禽类
圣杯布局
中间内容元素在dom元素次序中优先位置,缺点在于:.main的最小宽度不能小于.left/.right
在页面宽度缩的很小时,中间栏只会达到最小宽度
实现源码:
<div id="container">
<!-- 自适应元素置于顶部,否则其他元素位置错乱 -->
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
* {
margin: 0;
padding: 0;
font-size: 1.6rem;
box-sizing: border-box;
}
#container {
min-width: 40rem; /* 设置最小宽度,即使页面最小,内容的宽度也不可以小于400rem */
background-color: green;
height: 20rem;
/* 为两侧预留位置 */
padding: 0 20rem;
}
.main {
width: 100%;
height: 20rem;
float: left;
background-color: blue;
}
.left, .right {
float: left;
width: 20rem;
height: 50rem;
background-color: red;
}
/* 如果正数的话,left子盒子会向右移,如果是负数的话,则子盒子会在父盒子内部,相对于本行向子盒子的上一行从右向左移动,因为是-100%,所以上一行从右向左的移动距离为父盒子的宽度,即于父盒子的左边线相邻 */
.left {
margin-left: -100%;
position: relative;
left: -20rem;
}
.right {
margin-left: -20rem;/* 负的自身的宽度 */
position: relative;
right: -20rem;
}
双飞翼布局
中间栏宽度可以缩小至0
实现源码:
<div id="container">
<!-- 自适应元素置于顶部,否则其他元素位置错乱 -->
<div class="main">
<div class="main-content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
* {
margin: 0;
padding: 0;
}
#container {
min-width: 40rem;
height: 20rem;
background-color: green;
}
.main, .left, .right {
float: left;
}
.left, .right {
width: 20rem;
height: 50rem;
background-color: blue;
}
.main {
width: 100%;
height: 30rem;
background-color: red;
}
.main-content {
margin: 0 20rem;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -20rem;
}