css之元素换行处理

发表于 | 分类于 | 评论数： | 阅读次数：

需求

根据后端返回的列表长度，渲染出N个方块。5个方块一行，超过5个则自动换行。

最终效果如下：

image-20210506224250191

实现方法

使用元素换行，重点在于需要给外层的容器固定宽度，然后采用flex或float均可实现。

  • 使用flex布局，结合flex-warp进行换行。参考代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <html>

    <head>
    <style type="text/css">
    .container {display: flex; width: 120px; flex-wrap: wrap}
    .block {width: 14px; height: 14px; background: green; margin: 4px;}
    </style>
    </head>

    <body>
    <div class="container">
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    </div>
    </body>

    </html>

  • 使用float布局，超过宽度自动换行

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <html>

    <head>
    <style type="text/css">
    .container { width: 120px;}
    .block {width: 14px; height: 14px; background: green; margin: 4px; float: left}
    </style>
    </head>

    <body>
    <div class="container">
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    <div class="block" ></div>
    </div>
    </body>

    </html>