浮动divs剩下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>

Answer 2

这与两件事有关。首先，正文具有边距，因此设置为0允许div与页面的边缘齐平。在移动浏览器上，现在可以像您期望的那样工作。其次，滚动条阻碍了。这可以通过在身体上应用overflow: hidden样式来修复。

修改

为了保留滚动条，添加滚动条时，必须强制包含元素（在本例中为主体）不缩小。要实现此效果，您需要将正文的宽度设置为100vw（如另一个答案所示），并通过将overflow-x: hidden添加到正文的CSS来隐藏水平滚动条。