[分享]css两个div同一行

<div class="container">
  <div class="item item1">Item1</div>
  <div class="item item2">Item2</div>
</div>

我们可以使用CSS中的float属性来实现这一效果。我们设置两个元素都向左浮动，然后设置宽度为50%。这样，两个元素就可以自适应宽度，在同一行显示。

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

同时，我们也可以使用display属性和inline-block来实现两个元素在同一行显示。我们将两个元素都设置display: inline-block，可以让它们在同一行显示，并且根据设置的宽度自适应调整大小。

.container {
  font-size: 0;
  /* 或者使用float方法中的overflow: hidden */
}
.item {
  display: inline-block;
  width: 50%;
  font-size: 16px; /* 恢复字体大小 */
  vertical-align: top; /* 顶部对齐 */
}

使用CSS能够轻松实现两个元素同一行显示的效果，同时为网页开发带来更多的可能性。