[分享]css两个div在同一行

在CSS中，将两个

元素放在同一行是非常常见的需求。这可以通过使用CSS的"display"属性和"float"属性来实现。

  .container{
      overflow: auto;
    }
    .left{
      float: left;
      width: 50%;
    }
    .right{
      float: right;
      width: 50%;
    } 

在这段CSS代码中，我们首先为包含

元素的容器设置了"overflow: auto;"属性。这是因为在使用"float"属性时，父元素的高度会塌陷，需要使用"overflow: auto;"属性来清除浮动塌陷。

接着，我们为左侧的

元素设置了"float: left;"属性和"width: 50%;"属性，这将使其靠左并占用50%的宽度。

同样的，我们为右侧的

元素设置了"float: right;"属性和"width: 50%;"属性，这将使其靠右并占用50%的宽度。

如此一来，左右两侧的

元素就可以在同一行中并排显示了。如果需要添加更多的

元素，并排显示，可以将它们分别设置成左、右浮动的元素，以实现同样的效果。