CSS div css一行三列

在本文中，我们将介绍如何使用CSS div来实现一行三列的布局。一行三列布局是常用的页面结构之一，可以用于展示各种信息，如产品展示、服务介绍等。

阅读更多：CSS 教程

传统的实现方式

在CSS出现之前，一行三列布局是用table标签实现的。但是，table标签在现代页面布局中已经不再推荐使用了。因此我们需要使用CSS来实现。

使用float实现

使用float属性，可以把div元素“浮动”起来，从而实现一行多列的布局。具体实现步骤如下：

<style>
    .container{
        width: 100%;
        overflow: hidden;
    }
    .left{
        width: 33.33%;
        float: left;
        background-color: #f2f2f2;
    }
    .middle{
        width: 33.33%;
        float: left;
        background-color: #eee;
    }
    .right{
        width: 33.33%;
        float: left;
        background-color: #f2f2f2;
    }
</style>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

上述代码中，我们先定义了一个容器(container)来包含三个div(left, middle, right)。容器需要设置宽度100%，并在css中添加“overflow: hidden;”属性，这样可以清除“浮动”带来的布局问题。

然后分别对三个div进行样式设置：宽度为33.33%，并通过“float: left;”实现左浮、中浮、右浮。

但是，使用float实现的一行多列布局存在一个问题：如果每列的高度不一样，会出现错位的情况。

这时，我们需要使用其他方法来解决这个问题。

使用Flex布局

Flex布局是CSS3里一个新的布局模式。Flexbox布局简单灵活，并且适用性也非常广泛，可以从根本上解决“浮动”造成的很多问题。

先来看看Flex布局的基本特征：

1.容器的display属性设置为flex或inline-flex；
2.容器的flex-direction属性决定主轴的方向，可以是水平的row，也可以是竖直的column；
3.容器的justify-content属性决定主轴上的对齐方式；
4.容器的align-items属性决定交叉轴上的对齐方式。

有了这些基础知识，我们可以很方便的使用Flex来实现一行多列布局。示例如下：

<style>
    .container{
        display: flex;
        justify-content: space-between;
        background-color: #f2f2f2;
    }
    .left, .middle, .right{
        width: 33.33%;
        background-color: #eee;
    }
</style>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

上述代码中，我们首先定义容器的样式：将display设置为flex，这样容器内的元素就可以使用Flex布局了，并通过justify-content设置三列之间的间隔。这里使用space-between属性，让左中右三个元素之间等间距分布。

接下来，我们定义三列的宽度为33.33%，然后就可以看到效果了

使用Flex实现一行三列布局的优点有：