[分享]css两个div左右显示不出来

在开发网页时，我们常常需要将内容分成两个部分，使得网页看起来更加美观。左侧内容右侧内容但是，有时候我们会发现两个div并没有出现在同一行，而是错开了。这种情况通常出现在两个div的宽度之和超过了其父元...

在开发网页时，我们常常需要将内容分成两个部分，使得网页看起来更加美观。

<div class="left">左侧内容</div><div class="right">右侧内容</div>

但是，有时候我们会发现两个div并没有出现在同一行，而是错开了。这种情况通常出现在两个div的宽度之和超过了其父元素的宽度时。

为了解决这个问题，我们可以用CSS的浮动属性来将两个div放在同一行。首先，我们需要给两个div设置相同的高度，然后将它们向左或向右浮动

.left,.right {
  height: 100px;
  float: left;
}

这样，左侧的div将会在右侧的div的左边浮动，两个div就会被放在同一行上了。

但是提醒一下，我们当然可以使用CSS的浮动属性使两个div左右排列，但是在实际开发中可能并不会用到它。现在的流行趋势是使用Flexbox进行布局，或使用CSS Grid。这些新的布局方式可以让我们更方便地进行复杂的布局。