css如俩个div在一行

在网页布局中，经常需要将多个div元素放在同一行中。CSS实现这一功能非常简单，可以通过设置浮动、inline-block或者flex等属性来实现。下面演示三种方法：

/* 方法1：使用浮动 */
<div class="left">left</div>
<div class="right">right</div>
 
.left {
  float: left;
}
.right {
  float: right;
}

/* 方法2：使用 inline-block */
<div class="left">left</div>
<div class="right">right</div>
 
.left,.right {
  display: inline-block;
  *display: inline; /* 兼容IE6、7 */
  *zoom: 1;
}

/* 方法3：使用 flex */
<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
 
.container {
  display: flex;
}
.left {
  order: 1;
  flex: 1;
}
.right {
  order: 2;
  flex: 1;
}

以上三种方法都可以实现两个div元素在同一行，并根据需要分别设置左右浮动、等宽、不等宽等样式。