布局

等分布局

外容器添加 font-size: 0; 内容器使用需要的字体大小 font-size: 14px;

margin-right: -5px; 是兼容旧版浏览器的，现在一般可以不加

<style type="text/css">
    .inner {
        width: 33.33%;
        height: 300px;
        display: inline-block;
        outline: solid 1px black;
        font-size: 14px;
    }
    .outer {
        font-size: 0;
    }
    .inner:last-child {
        margin-right: -5px;
    }
</style>

<div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>

自适应布局

利用 margin-left padding-left 把自适应容器顶到相应的位置

<style type="text/css">
    .fixed {
        width: 100px;
    }
    .auto {
        margin-left: -104px;
        padding-left: 104px;
        box-sizing: border-box;
        width: 100%;
    }
    .fixed,.auto {
        height: 300px;
        display: inline-block;
        vertical-align: top;
        outline: solid 1px black;
    }
</style>

<div class="outer">
    <div class="fixed"></div>
    <div class="auto"></div>
</div>

flex等分布局

利用 flex 来做等分布局更方便

<style type="text/css">
    .parent {
        display: flex;
    }
    .child {
        height: 300px;
        width: 33.33%;
        outline: solid 1px;
    }
</style>

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

flex自适应布局

利用 flex 来做自适应布局也很方便，只要使用 flex: 1; 即可

<style type="text/css">
    .parent {
        display: flex;
        width: 100%;
        height: 200px;
    }
    .child1 {
        width: 200px;
        background-color: lightblue;
    }
    .child2 {
        flex: 1;
        background-color: pink;
    }
</style>

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
</div>

flex垂直居中

justify-content: center;是控制水平方向居中的

<style>
    #parent {
        display: flex;
        width: 300px;
        height: 300px;
        outline: solid 1px;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
    #child {
        width: 100px;
        height: 100px;
        outline: solid 1px;
    }
</style>

<div id="parent">
    <div id="child">
    </div>
</div>