[分享]css两个div怎么并排显示

CSS是一种非常重要的前端技术，它可以将网页的布局和样式进行控制。在实际开发中，我们经常会遇到需要将两个div元素并排显示的情况，下面就来介绍一下如何实现。左侧div 右侧div 如上所示，可以通过给...

CSS是一种非常重要的前端技术，它可以将网页的布局和样式进行控制。在实际开发中，我们经常会遇到需要将两个div元素并排显示的情况，下面就来介绍一下如何实现。

<div style="float: left; width: 50%; background-color: #b2c1ff;">左侧div</div>
<div style="float: left; width: 50%; background-color: #ffc1b2;">右侧div</div> 

如上所示，可以通过给两个div设置float属性，并设置宽度为50%，就可以将它们横向并排显示。其中，float: left使元素向左浮动，width: 50%则指定宽度为50%。

除此之外，我们还可以使用display: inline-block属性来实现两个div并排显示，代码如下：

<div style="display: inline-block; width: 50%; background-color: #b2c1ff;">左侧div</div>
<div style="display: inline-block; width: 50%; background-color: #ffc1b2;">右侧div</div> 

使用display: inline-block属性的好处是可以使元素保持均匀的高度，但需要注意的是，在行内元素中使用display: inline-block时，需要将HTML中的空格、回车等去掉，否则两个div之间会有一些间距。

以上就是CSS实现两个div并排显示的两种方式，具体应该选择哪种方式，还需要根据具体情况来决定。希望这篇文章对大家有所帮助！