CSS中的响应式2列正方形

Question

我正在尝试创建一个响应式页面，其中正方形占全宽的 50%（每行 2 个正方形）。在移动设备（包括 iPhone 6/7 Plus）上，这些方块应该是一个在另一个之下，但这是它不能使用以下代码的地方：

.square {
  width: 100vw;
  height: 100vw;
  float: left;
}

@media (min-width: 1170px) {
  .square {width: 50vw; height: 50vw; }
}

理想情况下我会使用 Bootstrap，但我不知道如何创建正方形。

Answer 1

引导示例：

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <div class="square"></div>
    </div>
    <div class="col-lg-6">
      <div class="square"></div>
    </div>
  </div>
</div>

CSS：

.square {
  height: 0;
  padding-bottom: 100%;
  background-color: green;
}

http://codepen.io/Deka87/pen/yMrmKK

Answer 2

您正在寻找这样的东西吗？ https://jsfiddle.net/5xc8fs0a/

它利用了填充百分比基于宽度这一事实，因此 padding-bottom: 100% 确保高度和宽度完全相同。

.square {
  float: left;
  width: 48%;
  margin-right: 1%;
  background: red;
}

.square:after {
  content: '';
  display: inline-block;
  height: 0;
  padding-bottom: 100%;
}