CSS之display属性之inline-block布局实现详解

在网页布局的过程中，有时候我们需要把元素放在一行中并且保持元素间的间距，而且元素的大小不确定，这个时候使用inline-block布局可以很好的解决这个问题。

1. inline-block的基本概念

inline-block是指内联块级元素，这个属性可以让元素以块级元素的方式显示，同时保持元素之间的间距，也可以设置宽度、高度和上、下边距，非常适合用来进行网页布局。

2. 使用inline-block进行水平布局

使用inline-block可以让多个元素水平排列，并且保持元素之间的间距。

2.1 示例1

下面是一个简单的示例可以实现两个div元素的水平排列：

<style>
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
</style>

<div class="box"></div>
<div class="box"></div>

通过display: inline-block;将两个div元素水平排列，设置div的宽度和高度，使得两个div元素大小一致，背景颜色区分。

2.2 示例2

下面的代码演示如何实现使用inline-block水平排列的图文列表布局：

<style>
    .container {
        text-align: center;
    }
    .item {
        display: inline-block;
        width: 200px;
        height: 300px;
        margin: 0 20px;
        text-align: left;
    }
    .item img {
        width: 100%;
    } 
    .item p {
        margin-top: 10px;
        font-size: 14px;
        color: #333;
        line-height: 1.5;
    }
</style>

<div class="container">
    <div class="item">
        <img src="https://via.placeholder.com/200x200.png" alt="image">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="item">
        <img src="https://via.placeholder.com/200x200.png" alt="image">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="item">
        <img src="https://via.placeholder.com/200x200.png" alt="image">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
</div>

通过display: inline-block;将三个div元素水平排列，设置每个item元素的宽度和高度，和margin值来控制元素的间距。其中 .item img 设置了宽度为100%可以适应不同大小的图片， .item p 设置了 margin-top 等。

3. 使用inline-block进行垂直布局

使用inline-block也可以让多个元素垂直排列，并且保持元素之间的间距。

3.1 示例3

下面是一个简单的示例可以实现两个div元素的垂直排列：

<style>
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #f00;
    }
</style>

<div class="box"></div><br>
<div class="box"></div>

通过将第二个div使用
标签实现垂直排列，设置div的宽度和高度，使得两个div元素大小一致，背景颜色区分。

3.2 示例4

下面的代码演示如何实现使用inline-block垂直排列的列表布局：

<style>
    .container {
        text-align:center;
    }
    .item {
        display: inline-block;
        width: 200px;
        height: 300px;
        margin: 0 20px;
        text-align: center;
        vertical-align: top;
    }
    .item img {
        width: 100%;
    } 
    .item p {
        margin-top: 10px;
        font-size: 14px;
        color: #333;
        line-height: 1.5;
    }
</style>

<div class="container">
    <div class="item">
        <img src="https://via.placeholder.com/200x200.png" alt="image">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div><br>
    <div class="item">
        <img src="https://via.placeholder.com/200x200.png" alt="image">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div><br>
    <div class="item">
        <img src="https://via.placeholder.com/200x200.png" alt="image">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div><br>
</div>

通过将每个item元素都使用
标签分行，设置每个item元素的宽度和高度，和margin值来控制元素的间距。其中 .item img 设置了宽度为100%可以适应不同大小的图片， .item p 设置了 margin-top 等, 通过 vertical-align: top; 控制布局。