html - float div 留有 50vw

Question

我有一堆 div，我想要在 2 列中使用 50vw 和 50vw 来制作一个完美的正方形。但是，当向左浮动时，它们不会彼此相邻，而是会在新的一行中移动。它必须具有响应性，所以我不能使用固定值。我该怎么做？

HTML

<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>

CSS

body {
    margin: 0px;
}

div {
    width: 50vw; 
    float: left;
    display: inline-block;
    height: 50vw;
    background: pink;
}

代码:http://jsfiddle.net/ryp829mk/8/

Answer 1

用显式宽度 = 100vw 将它们包裹在一个 div 中:

<div style = "width:100vw">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
</div>