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