css 制作一行两列表格

CSS是一种用于网页美化的样式语言，而制作一行两列表格是css的常见应用之一。下面我们来看一下怎样使用CSS来实现这种效果。

  style>
    .container {
          display: flex;
     /* 将.container的子元素变成弹性盒子 */      justify-content: space-between;
 /* 将两个子元素分别放在两端 */    }
    .item {
          width: 48%;
     /* 留下2%的间距 */      box-sizing: border-box;
     /* 避免盒子大小被border和padding撑大 */      border: 1px solid #CCC;
     /* 加入边框 */      padding: 10px;
    }
      /style>
      div class="container">
        div class="item">
          /* 第一列 */    /div>
        div class="item">
          /* 第二列 */    /div>
      /div>
    

上述代码中，我们使用了flex布局来实现一行两列表格。通过给容器div设置display:flex属性，再设置 justify-content:space-between属性，就可以使两个子元素分别置于两端。我们还为每个子元素添加了一个宽度为48%的类，这样就把留下的2%的间距挤掉了，突出了边框和内部填充效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！