[分享]css两个div并行

CSS中，我们可以通过使用浮动（float）实现两个div并行排列的效果。我们先来看看以下的HTML代码： 左侧内容 右侧内容 在这段代码中，我们使用了一个名为container的父级div...

CSS中，我们可以通过使用浮动（float）实现两个div并行排列的效果。

我们先来看看以下的HTML代码：

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

在这段代码中，我们使用了一个名为container的父级div，并在其内部放置了两个名为left和right的子级div。现在，我们来添加一些CSS样式来使它们并排展示。

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

通过给父级div设置overflow:hidden属性，我们可以让其包含其内部所有的浮动元素。接着，我们分别给左侧和右侧的div设置了相同的宽度，并使用 float:left 和 float:right 将它们浮动到左右两侧。

使用以上的CSS样式，我们就可以实现两个div并排展示的效果了：