[分享]css两个div不在同一行显示

CSS是前端开发必不可少的技术之一，它可以让我们轻松地控制网页的布局和样式。但是在某些情况下，我们会遇到一些棘手的问题，比如两个div不在同一行显示。这种情况往往让人感到头疼，但实际上只需要掌握一些基...

CSS是前端开发必不可少的技术之一，它可以让我们轻松地控制网页的布局和样式。但是在某些情况下，我们会遇到一些棘手的问题，比如两个div不在同一行显示。这种情况往往让人感到头疼，但实际上只需要掌握一些基本的技巧，就可以轻松解决这个问题。

  <style>
    .wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .box {
      width: 45%;
      height: 200px;
      margin-bottom: 20px;
      background-color: #f8f8f8;
      border: 1px solid #ddd;
      box-shadow: 0px 2px 5px #ccc;
    }
    .box:nth-child(odd) {
      margin-right: 5%;
    }
  </style>

  <div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div> 

在上述代码中，我们使用了flexbox布局，将包含两个div的父元素设为flex容器，并通过flex-wrap属性实现了多行排列的效果。由于flex容器默认沿主轴方向排列，我们使用justify-content属性将两个div定位到容器的两端，并通过margin-right属性让奇数个div右侧留有一定的空白，增加排版美感。

以上就是解决两个div不在同一行显示的方法。掌握这些基本的技巧，可以让我们在实际开发中更加灵活地处理页面元素的布局，同时提高开发效率。