[分享]css中5个div横排显示

CSS中有很多能够使页面布局更加美观的技巧，其中横排显示5个div是其中之一。我们首先需要在HTML中创建5个div，并且设置它们各自的样式和内容： Box 1 Box 2 Box 3 ...

CSS中有很多能够使页面布局更加美观的技巧，其中横排显示5个div是其中之一。

我们首先需要在HTML中创建5个div，并且设置它们各自的样式和内容：

 <div class="box" id="box1"> Box 1 </div>
    <div class="box" id="box2"> Box 2 </div>
    <div class="box" id="box3"> Box 3 </div>
    <div class="box" id="box4"> Box 4 </div>
    <div class="box" id="box5"> Box 5 </div> 

接下来，我们需要设置CSS样式，让这5个div横排显示。我们可以利用float属性将它们横排，并且给它们设置一个相同的宽度和高度：

 .box {
        float: left;
        width: 100px;
        height: 100px;
        margin-right: 10px;
        background-color: #ccc;
    }
    #box1 {
        background-color: #ff0000;
    }
    #box2 {
        background-color: #00ff00;
    }
    #box3 {
        background-color: #0000ff;
    }
    #box4 {
        background-color: #ffff00;
    }
    #box5 {
        background-color: #00ffff;
    } 

在这里，我们将5个div给了一个宽度和高度，并将它们的浮动方向设为左，这样就可以将它们横排了。同时，我们还可以给每个div添加不同的背景颜色，使它们在页面中更加醒目。

最后的效果是这样的：

通过上述CSS技巧，可以快速实现5个div横排显示的效果，进而使页面布局更加美观。