CSS 布局
2018-09-24 本文已影响308人
小小的白菜
实现三栏布局：高度固定，中间自适应，左右宽度是 300px。（div 标签的位置）
布局一：圣杯布局
圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
不同在于解决“中间栏div内容不被遮挡”问题的思路不一样：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
<style>
* {
margin: 0;
padding: 0;
}
.left,
.center,
.right {
position: relative;
float: left;
height: 300px;
}
.wrapper{
padding: 0 300px;
overflow: hidden;
}
.left {
margin-left: -100%;
left: -300px;
width: 300px;
background: red;
}
.right {
margin-left: -300px;
right: -300px;
width: 300px;
background: green;
}
.center {
width: 100%;
background: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
布局二：双飞翼布局
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
<style>
* {
margin: 0;
padding: 0;
}
.center {
float: left;
width: 100%;
height: 300px;
overflow: hidden;
background-color: springgreen;
}
.content {
margin: 0 300px;
height: 100%;
background-color: purple;
}
.left {
float: left;
width: 300px;
height: 300px;
background-color: pink;
margin-left: -100%;
}
.right {
float: left;
width: 300px;
height: 300px;
background-color: pink;
margin-left: -300px;
}
</style>
<body>
<div class="wrapper">
<div class="center">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
布局三：flex 布局
<style>
.wrapper {
display: flex;
}
.left {
width: 300px;
height: 300px;
background-color: pink;
}
.main {
flex: 1;
height: 300px;
background-color: springgreen;
}
.right {
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<div class="wrapper">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
布局四：绝对定位布局
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
}
.left {
position: absolute;
left: 0;
width: 300px;
height: 300px;
background-color: pink;
}
.right {
position: absolute;
right: 0;
width: 300px;
height: 300px;
background-color: springgreen;
}
.center {
position: absolute;
left: 300px;
right: 300px;
height: 300px;
background-color: yellowgreen;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
网格布局
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 300px;
}
.left {
background-color: purple;
}
.center {
background-color: dodgerblue;
}
.right {
background-color: springgreen;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
圣杯布局和双飞翼布局的作用和区别
六种CSS经典三栏布局方案
扩展一：上下固定，中间自适应
布局一：绝对定位布局
<style>
* {
padding: 0;
margin: 0;
}
.top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: pink;
}
.center {
position: absolute;
top: 100px;
bottom: 100px;
width: 100%;
overflow: auto;
background-color: yellowgreen;
color: #fff;
text-align: center;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: purple;
}
</style>
<body>
<div class="wrapper">
<div class="top"></div>
<div class="center">
</div>
<div class="bottom"></div>
</div>
</body>
布局二：flex 布局
<style>
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.top {
width: 100%;
height: 100px;
background-color: yellow;
}
.center {
flex: 1;
overflow: auto;
background-color: pink;
color: #fff;
}
.bottom {
width: 100%;
height: 100px;
background-color: rosybrown;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="top"></div>
<div class="center">
</div>
<div class="bottom"></div>
</div>
</body>
布局三：网格布局
超级nice的教程 【图片版】CSS网格布局（Grid）完全教程
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px auto 100px;
}
.top {
background-color: springgreen;
}
.center {
background-color: rosybrown;
overflow: auto;
}
.bottom {
background-color: purple;
}
</style>
<body>
<div class="wrapper">
<div class="top"></div>
<div class="center">
</div>
<div class="bottom"></div>
</div>
</body>
扩展二：左边固定，右边自适应
布局一：双 float 布局
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
}
.left {
float: left;
width: 100px;
height: 100%;
background-color: rosybrown;
}
.right {
float: left;
width: calc(100% - 100px);
height: 100%;
background-color: yellowgreen;
overflow: hidden;
}
.content {
overflow-y: scroll;
height: 100%;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right">
<div class="content">
</div>
</div>
</div>
</body>
</html>
布局二：flex布局
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
}
.wrapper {
display: flex;
height: 100%;
}
.left {
width: 150px;
height: 100%;
background-color: yellowgreen;
}
.right {
flex: 1;
height: 100%;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right">
<div class="content">
</div>
</div>
</div>
布局三：双inline-block方案
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
font-size: 0;
-webkit-text-size-adjust: none; // 解决inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距的问题
}
.left, .right {
height: 100%;
display: inline-block;
vertical-align: top;
}
.left {
width: 150px;
background-color: pink;
}
.right {
width: calc(100% - 160px);
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
布局四：grid布局
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: 1fr;
}
.left {
background-color: yellowgreen;
}
.right {
background-color: yellow;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
布局五：float+BFC
<style>
html, body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.left {
width: 150px;
height: 100%;
float: left;
background-color: yellow;
}
.right {
width: calc(100% - 150px);
height: 100%;
background-color: yellowgreen;
overflow: hidden;
}
</style>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
