CSS内联块网格

时间:2014-07-31 21:43:18

标签: css

我刚开始学习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(绿框)附近吗?

3 个答案:

答案 0 :(得分:2)

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;
    }

答案 1 :(得分:1)

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;
}

答案 2 :(得分:0)

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

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

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

body { width: 1000px; }

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

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

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