[分享]css两个多div并列显示

CSS是一种样式表语言，可以用来美化网页的外观和布局。在设计布局时，我们经常需要将两个或多个div并列显示。这篇文章将介绍如何使用CSS来实现这个效果。 .container { display...

CSS是一种样式表语言，可以用来美化网页的外观和布局。在设计布局时，我们经常需要将两个或多个div并列显示。这篇文章将介绍如何使用CSS来实现这个效果。

<div class="container">
  <div class="left-side"></div>
  <div class="right-side"></div>
</div>

<style>
  .container {
    display: flex;
  }

  .left-side {
    width: 50%;
  }

  .right-side {
    width: 50%;
  }
</style> 

以上代码演示了如何使用flex布局来将两个div并列显示。首先，我们创建了一个包含两个子元素的容器（.container）。接着，我们在容器中设置了display属性为flex，这使得容器内的子元素可以灵活地伸缩和对齐。然后，我们给左边的div（.left-side）设置了宽度为50%，这意味着它将占据容器的50%宽度。同样，右边的div（.right-side）也被赋予了50%的宽度。这样，两个div就可以并列显示了。

<div class="wrapper">
  <div class="left"></div>
  <div class="right"></div>
</div>

<style>
  .wrapper {
    display: inline-block;
  }

  .left {
    width: 50%;
    float: left;
  }

  .right {
    width: 50%;
    float: right;
  }
</style> 

以上代码演示了另一种实现方式，使用了浮动（float）。首先，我们创建了一个容器（.wrapper）来包含两个子元素。然后，我们将容器的display属性设置为inline-block，这使得容器可以在一行内显示。接着，我们给左边的div（.left）设置了宽度为50%，并将其向左浮动。同样，右边的div（.right）也被赋予了50%的宽度，并向右浮动。这样，两个div就可以并列显示了。

以上就是两种使用CSS将两个div并列显示的方法。无论你选择哪种方法，记得为子元素设置适当的宽度和高度，并根据需要添加其他样式来创建你想要的布局效果。