[分享]css两行两列的div

CSS是网页设计中不可或缺的一部分，我们可以利用CSS来实现网页布局的各种效果，其中最基本的就是两行两列的div布局。下面我们来看一下怎么实现这个布局。 .container { display: f...

CSS是网页设计中不可或缺的一部分，我们可以利用CSS来实现网页布局的各种效果，其中最基本的就是两行两列的div布局。下面我们来看一下怎么实现这个布局。

 <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .left-column {
      width: 50%;
      height: 200px;
      background-color: #e8e8e8;
      box-sizing: border-box;
      padding: 20px;
    }
    .right-column {
      width: 50%;
      height: 200px;
      background-color: #fff;
      box-sizing: border-box;
      padding: 20px;
    }
  </style>

  <div class="container">
    <div class="left-column">
      <p>左边一列</p>
      <p>左边一列</p>
    </div>
    <div class="right-column">
      <p>右边一列</p>
      <p>右边一列</p>
    </div>
  </div> 

首先，我们创建一个父元素container来包含两个子元素left-column和right-column。我们使用了flex布局，并且设置了flex-wrap属性为wrap，这可以让我们的布局在窄屏幕下也能适应。

之后，我们对子元素进行样式的编写。我们设置了子元素的宽度为50%，这样就可以使其一行两列排列。因为盒子模型中的padding和border也会影响宽度和高度，所以我们使用box-sizing属性来规定如何计算元素的宽度和高度。接着，我们为子元素添加了一些背景颜色和内边距，使其更加美观。

最后，我们把左边和右边的内容放到p标签里面，这样可以让内容更加具有可读性。整个布局的代码已经完成了，现在我们就可以在我们的网页中实现这个布局啦！