[分享]css两个div同行

在HTML中，我们可以分别使用div标签来创建一个块级元素，这个元素可以包含其他任意的HTML元素，另一方面，我们也可以使用CSS来控制这些块级元素的样式。在CSS中，我们可以使用浮动或者定位来让两个...

在HTML中，我们可以分别使用div标签来创建一个块级元素，这个元素可以包含其他任意的HTML元素，另一方面，我们也可以使用CSS来控制这些块级元素的样式。在CSS中，我们可以使用浮动或者定位来让两个div元素位于同一行。

 <div class="container">
        <div class="box1">
            第一个div元素
        </div>
        <div class="box2">
            第二个div元素
        </div>
    </div>
    <br>
    <br>
    .container{
        width: 100%;
        display: block;
        overflow: hidden;
    }
    
    .box1, .box2{
        width: 50%;
        display: block;
        float: left;
    } 

在上面的例子中，我们创建了一个包含两个div元素的容器，每个元素都有一个class，让我们可以在CSS样式表中使用这些类。容器的宽度被设置为100%，这样它就可以包含两个块级元素在同一行显示。

CSS样式表中的box1和box2类都被设置为占据容器宽度的一半，这样它们就可以位于同一行中。这些元素也会设置为浮动，这样它们就不会被其他内容挤出所在行的位置。如果我们想要这些元素是左对齐或者右对齐，只需要改变浮动的方向就可以了。