[分享]css中如何让三个div并排

CSS是前端开发中不可或缺的重要技能，掌握好CSS能让我们更好地进行页面布局设计。本篇将介绍如何让三个div并排显示。 首先，我们需要给三个div设置共同的样式。可以通过选择器设置样式。.box{...

CSS是前端开发中不可或缺的重要技能，掌握好CSS能让我们更好地进行页面布局设计。本篇将介绍如何让三个div并排显示。

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

首先，我们需要给三个div设置共同的样式。可以通过选择器设置样式。

.box{
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
    margin-right: 10px;
} 

上述代码中，我们设置了div的宽高、背景色以及浮动和右侧间距等共同样式。

接下来，我们需要注意设置div的盒模型。由于包含了边框，我们需要将box-sizing设置为border-box。这样能够保证设置的宽高是包括边框的，从而避免布局错位。

.box{
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
    margin-right: 10px;
} 

最后，我们可以通过给父级元素设置一定的宽度，以及在最后一个div清除浮动，从而实现三个div的并排布局。

.container{
    width: 330px;
    overflow: hidden;
}
.box{
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
    margin-right: 10px;
}
.box:last-child{
    margin-right: 0;
} 

通过上述CSS样式代码，我们就能够成功地让三个div进行并排布局了。此方法也可以轻松实现更多div的并排布局。