Question

我试图创建一个方形div的网格。这就是我试过的：

HTML：

<div>A</div>
<div>B</div>
<div>C</div>

CSS：

div{
    width:50vw;
    height:50vw;
    display:inline;
    float:left;
}

（JSFiddle）

但是，不是获得两列，而是显示一个在另一列之下。

有谁知道如何解决这个问题？感谢。

Answer 1

请勿使用50vw，因为计算中不包含滚动条。请改用50％。

非常略有差异，但这是用户不太可能注意到的。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
div {
  width: 50%;
  height: 50vw;
  float: left;
}
#a {
  background-color: red;
}
#b {
  background-color: blue;
}
#c {
  background-color: green;
}
#d {
  background-color: yellow;
}

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>

CSS-方形div的响应全宽网格

1 个答案: