【使用inline-block会换行 _九宫格】

使用inline-block会换行

我也踩过这个坑( 4 )

已统计您的踩坑,无需重复点击

回答(2)

九宫格

详细描述

截图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>九宫格</title>
    <style pyte="txet/css">
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            width: 100%;
            padding-bottom: 100%;
        }
        
        .a {
            display: inline-block;
            width: 31%;
            padding-bottom: 31%;
            background-color: orange;
            margin: 1%;
            border-radius: 10%;
        }
    </style>
</head>

<body>
    <div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
    </div>
</body>

</html>

编辑于2024-11-23

时间排序

热门排序

[北京|结业弟子]JS-顾仁鹏
1

因为你用的是 inlineblock，代码里的空格占了一个位置，只要整体加一个font-size：0；即可，而且我不懂你的body属性设置里为什么会加padding-bottom，完全没有存在的必要。

查看全部>

编辑于2018-12-08
[真传弟子]JS-陈振华
0

你这应该是被抵着了吧，把盒子挤下去了

查看全部>

编辑于2019-11-11

去第页