HTML代码页面纵向等分

在制作网页时，经常需要将页面纵向等分来排版内容。下面介绍两种实现方法。

/* 方法一：使用flexbox布局 *//* HTML代码 */div class="container">
      div class="row">
        div class="col-3">
    内容1/div>
        div class="col-3">
    内容2/div>
        div class="col-3">
    内容3/div>
        div class="col-3">
    内容4/div>
      /div>
    /div>
/* CSS代码 */.container {
      display: flex;
      flex-wrap: wrap;
}
.row {
      width: 100%;
}
.col-3 {
      width: 25%;
      height: 100px;
}
    

上述代码中，我们使用了flexbox布局，并将父容器设置为flex容器。子元素则使用col-3类名表示宽度为25%。

/* 方法二：使用grid布局 *//* HTML代码 */div class="grid-container">
      div class="grid-item">
    内容1/div>
      div class="grid-item">
    内容2/div>
      div class="grid-item">
    内容3/div>
      div class="grid-item">
    内容4/div>
    /div>
/* CSS代码 */.grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
}
.grid-item {
      height: 100px;
}
    

上述代码中，我们使用了grid布局，并将父容器设置为grid容器。子元素则使用默认的grid-item类名，利用repeat函数将子元素等分成4份。

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