常见布局

罗天旭大约 3 分钟约 928 字

单列布局

Demo 演示

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

.header {
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: blue;
}
.content {
    margin: 0 auto;
    max-width: 960px;
    height: 400px;
    background-color: aquamarine;
}
.footer {
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

Demo 演示

<div class="header">
    <div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>

.header {
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: blue;
}
.nav {
    margin: 0 auto;
    max-width: 800px;
    background-color: darkgray;
    height: 50px;
}
.content {
    margin: 0 auto;
    max-width: 800px;
    height: 400px;
    background-color: aquamarine;
}
.footer {
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

两列自适应布局

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

float+overflow:hidden

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right" style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>
</div>

.parent {
    overflow: hidden;
    zoom: 1;
}
.left {
    float: left;
    margin-right: 20px;
}
.right {
    overflow: hidden;
    zoom: 1;
}

flex

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right" style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>
</div>

.parent {
    display: flex;
}
.right {
    margin-left: 20px;
    flex: 1;
}

grid

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right" style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>
</div>

.parent {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 20px;
}

三栏布局

中间列自适应宽度，旁边两侧固定宽度

圣杯布局

<article class="container">
    <div class="center">
        <h2>圣杯布局</h2>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</article>

.container {
    width: 400px;
    padding-left: 120px; //为左右栏腾出空间
    padding-right: 120px;
}
.left {
    float: left;
    width: 100px;
    height: 200px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -120px;
}
.center {
    float: left;
    width: 100%;
    height: 200px;
    background: yellow;
}
.right {
    float: left;
    width: 100px;
    height: 200px;
    background: blue;
    margin-left: -100px;
    position: relative;
    right: -120px;
}

缺点

center 部分的最小宽度不能小于 left 部分的宽度，否则会 left 部分掉到下一行
如果其中一列内容高度拉长，其他两列的背景并不会自动填充。

双飞翼布局

<article class="container">
    <div class="center">
        <div class="inner">双飞翼布局</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</article>

.container {
    min-width: 600px; //确保中间内容可以显示出来，两倍left宽+right宽
}
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: red;
    margin-left: -100%;
}
.center {
    float: left;
    width: 100%;
    height: 200px;
    background: yellow;
}
.center .inner {
    margin: 0 200px; //新增部分
}
.right {
    float: left;
    width: 200px;
    height: 200px;
    background: blue;
    margin-left: -200px;
}

等高布局

等高布局是指子元素在父元素中高度相等的布局方式

<article class="container">
    <div class="center">
        <h2>圣杯布局</h2>
        <h2>圣杯布局</h2>
        <h2>圣杯布局</h2>
        <h2>圣杯布局</h2>
        <h2>圣杯布局</h2>
        <h2>圣杯布局</h2>
        <h2>圣杯布局</h2>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</article>

.container {
    padding-left: 220px; //为左右栏腾出空间
    padding-right: 220px;
}
.left {
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -220px;
}
.center {
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
}
.right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -220px;
}
.center,
.left,
.right {
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
.container {
    padding-left: 220px;
    padding-right: 220px;
    overflow: hidden; //把溢出背景切掉
}

粘连布局

有一块内容<main>，当<main>的高康足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。
当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部

<div id="wrap">
    <div class="main">
        main <br />
        main <br />
        main <br />
    </div>
</div>
<div id="footer">footer</div>

.code-demo-app {
    /* height: 500px; //高度一层层继承下来 */
    height: 100%
}
#wrap {
    min-height: 100%;
    background: pink;
    text-align: center;
    overflow: hidden;
}
#wrap .main {
    padding-bottom: 50px;
}
#footer {
    height: 50px;
    line-height: 50px;
    background: deeppink;
    text-align: center;
    margin-top: -50px;
}