Question

我刚开始学习html和css。我正在尝试使用内联块“方法”创建一个3x3网格。这是到目前为止的代码：

HTML：

<!doctype html>
<html>
    <head>
        <link href="ex.css" rel="stylesheet" type="text/css">
        <title>ex</title>
    </head>

    <body>
            <div id="r1"></div>
            <div id="r2"></div>
            <div id="r3"></div>
            <div id="r4"></div>
            <div id="r5"></div>
    </body>
</html>

CSS：

#r1 {
background-color: blue;
height: 300px;
width: 300px;
display: inline-block;
}
#r2 {
background-color: red;
height: 300px;
width: 300px;
display: inline-block;
}
#r3 {
background-color: blue;
height: 300px;
width: 300px;
display: inline-block;
}
#r4 {
background-color: green;
height: 300px;
width: 300px;
}
#r5 {
background-color: yellow;
height: 300px;
width: 300px;
}

有人可以帮助我将＃r5（黄色方框）水平放置在＃r4（绿框）附近吗？

Answer 1

You need to wrap every row with another div like that:

HTML:


<body>
    <div class="row">
            <div id="r1"></div>
            <div id="r2"></div>
            <div id="r3"></div>
    </div>
    <div class="row">
            <div id="r4"></div>
            <div id="r5"></div>
    </div>
</body> 


CSS:
    #r1 {
        background-color: blue;

    }
    #r2 {
        background-color: red;
    }
    #r3 {
        background-color: blue;  
    }
    #r4 {
        background-color: green;

    }
    #r5 {
        background-color: yellow;
    }

    .row > div{
        display: inline-block;
        height: 300px;
        width: 300px;
    }

Answer 2

Flex是为了拯救这一天！这正是flex所做的事情，但要注意 - 在旧浏览器上支持它并不是很好。如果您不太关心旧版浏览器，那么我建议使用flex，因为格式化页面在HTML中的外观是不受欢迎的。

请参阅此JSFiddle。

HTML：

<div id="container">            
    <div class="box" id="r1"></div>
    <div class="box" id="r2"></div>
    <div class="box" id="r3"></div>
    <div class="box" id="r4"></div>
    <div class="box" id="r5"></div>
</div>

CSS：

#r1 {
background-color: blue;
}
#r2 {
background-color: red;
}
#r3 {
background-color: blue;
}
#r4 {
background-color: green;
}
#r5 {
background-color: yellow;
}

.box
{
    height: 100px;
    width: 100px;
    -webkit-flex: 0 0 100px;
    flex: 0 0 100px;
}

#container
{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;

    width: 300px;
}

Answer 3

这可能不太性感，但出于基本目的，你可以每隔三个div添加换行符：

<div id="r3"></div>
<br>
<div id="r4"></div>

另一种替代方案（可能更合适）是在您的示例中为容器设置固定宽度：

body { width: 1000px; }

实际上会把盒子拆开，所以它们中的每一个都可能是内联块。

顺便说一下，你不需要重复所有规则，试试这个：

div { display: inline-block; height: 300px; width: 300px; }

CSS内联块网格

3 个答案: