html二行三列布局代码

HTML是一种基本的网页结构语言，二行三列布局是常见的网页布局之一，在这里我们通过使用HTML代码来展示这种布局。

!DOCTYPE html>
    html>
    head>
      title>
    二行三列布局/title>
      style>
    .container {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
    }
    .box {
          width: calc(33.33% - 20px);
          height: 200px;
          background-color: #ccc;
          margin-bottom: 20px;
    }
      /style>
    /head>
    body>
      div class="container">
        div class="box">
    /div>
        div class="box">
    /div>
        div class="box">
    /div>
        div class="box">
    /div>
        div class="box">
    /div>
        div class="box">
    /div>
      /div>
    /body>
    /html>
    

上述代码中，我们使用了flex布局，通过设定容器的属性来实现三列布局。其中，我们设定容器为flex布局，让子元素能够自适应宽度；设定子元素为calc函数计算宽度和高度，通过margin-bottom属性设置元素之间的间隔。

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