css 让2个div并排显示

今天我们来谈一下CSS怎样让两个并排显示的问题。

首先，让我们来看下面的HTML代码：

div class="box1">
    /div>
    div class="box2">
    /div>

我们需要用到CSS中的float和width属性来实现这个效果。我们给这两个分别加上class属性，然后对它们分别设置float属性，向左浮动或向右浮动，再给它们设置宽度，让它们占据屏幕的一定宽度。

我们来看下面的CSS代码：

.box1 {
        float: left;
        width: 50%;
}
.box2 {
        float: right;
        width: 50%;
}
    

上面的代码就是让第一个向左浮动，占据整个屏幕的50%，第二个向右浮动，也占据屏幕的50%。

最后，我们再来看一下完整的HTML代码：

div class="box1">
    /div>
    div class="box2">
    /div>
    style>
.box1 {
        float: left;
        width: 50%;
}
.box2 {
        float: right;
        width: 50%;
}
    /style>
    

以上代码可以完美地让两个并排显示，当然你也可以根据自己的需要来调整宽度、浮动方向等属性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！