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

Bootstrap示例：

Exceptions

CSS：

<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>

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

Answer 2

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

它利用了填充百分比基于宽度的事实，因此填充底部：100％确保高度和宽度完全相同。

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

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

CSS中的响应式2列方块

2 个答案: