两个div并排的实现代码

下面我来详细讲解一下“两个div并排的实现代码”的完整攻略。

下面我来详细讲解一下“两个div并排的实现代码”的完整攻略。

一、使用float实现

在HTML中，我们创建两个需要并排显示的div，并赋予它们class或id属性。在CSS中，我们对这两个div分别设置如下样式：

.div1 {
  float: left;
  width: 50%;
  background-color: #EEE;
  height: 100px;
}

.div2 {
  float: right;
  width: 50%;
  background-color: #DDD;
  height: 100px;
}

在这段CSS代码中，我们首先让第一个div向左浮动，其宽度占据了整个父元素的50%，并设置了一个背景颜色和一个高度。同样地，我们让第二个div向右浮动，也占据了整个父元素的50%，并设置了一个不同的背景颜色和相同的高度。

这样，两个div就可以并排显示在一行内了。如果想让它们在页面上居中显示，可以再为父元素设置一个text-align: center;的样式，同时给两个子元素分别设置display: inline-block;的样式。

二、使用flexbox实现

还有一种方法是使用CSS3中的Flexbox布局。在此方法中，我们在父元素中添加如下CSS样式：

.parent {
  display: flex;
  justify-content: space-between;
}

这段代码中，我们将父元素的display属性设置为flex，并使用justify-content属性将它的子元素进行间隔均分。这里的space-between表示子元素均分，它们之间会留出一定的空隙。

接下来，我们为子元素设置相应的CSS样式，就可以了。

示例说明

示例1：float

<div class="parent">
  <div class="div1">我是左边的div</div>
  <div class="div2">我是右边的div</div>
</div>

.parent {
  text-align: center;
  overflow: hidden;
}

.div1, .div2 {
  display: inline-block;
}

.div1 {
  float: left;
  width: 50%;
  background-color: #EEE;
  height: 100px;
}

.div2 {
  float: right;
  width: 50%;
  background-color: #DDD;
  height: 100px;
}

示例2：flexbox

<div class="parent">
  <div class="div1">我是左边的div</div>
  <div class="div2">我是右边的div</div>
</div>

.parent {
  display: flex;
  justify-content: space-between;
}

.div1, .div2 {
  width: 50%;
  background-color: #EEE;
  height: 100px;
}