水平排列四个块，块中的文字垂直居中

最新推荐文章于 2024-07-31 16:33:26 发布

原创最新推荐文章于 2024-07-31 16:33:26 发布 · 284 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了四种不同的网页布局方法：使用float和margin实现响应式布局，利用flex盒子模型进行灵活布局，通过table和table-cell属性创建表格式布局，以及采用bootstrap栅格系统构建可自适应的网格布局。

页面效果
在这里插入图片描述
1.利用float和margin

.box {
            width: 100%;
        }
        .one,
        .two,
        .three,
        .forth {
            width: 20%;
            height: 100px;
            float: left;
            margin: 10px 2%;
            text-align: center;
            line-height: 100px;
        }

2.flex盒子

  .box {
            width: 100%;
            display: flex;
            justify-content: space-around;
            text-align: center;
            line-height: 100px;
        }     
        .one,
        .two,
        .three,
        .forth {
            width: 20%;
            height: 100px;
        }

3.利用table，table-cell属性

 .box {
            width: 100%;
            text-align: center;
            line-height: 100px;
            display: table;
        }      
        .one,
        .two,
        .three,
        .forth {
            height: 100px;
            display: table-cell;
        }

4.利用 bootstrap栅格布局

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>