制作 2x2 div 盒的最“优雅”方式

Question

我已经构建了一个“类似 Buzzfeed”的测验应用，每个问题都有四个答案选项。在移动设备上，我对布局（2x2 盒子）感到非常满意。 但是，在桌面上，答案只是在屏幕上水平显示为 4 个选项。 主要问题是我使用 Angular 来生成所有问题和答案选择，这使得样式有点棘手。 关于如何“优雅地”对 html/css 进行编码以便它始终将答案选择显示为 2x2 框的任何想法？我尝试使用媒体查询，但感觉就像在大伤口上贴了创可贴。

当前代码和图片如下：

HTML：

<div class="jumbotron text-center" ng-hide="quizComplete">
    <h3>{{ questions[number].ask }}</h3>
    <div class="row">
        <div ng-repeat="answer in questions[number].answers" class="choice">
            <div ng-click="recordChoice(answer.points)">
                <span class="centerer"></span>
                <span class="centered">{{ answer.choice }}</span>
            </div>
        </div>
    </div>
</div>

CSS：

.choice {
    position: relative;
    display: inline-block;
    width: 128px;
    height: 128px;
    margin: 8px;
    background: rgba(183,222,237,1);
    background: -moz-linear-gradient(45deg, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 49%, rgba(113,206,239,1) 92%, rgba(183,222,237,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(183,222,237,1)), color-stop(49%, rgba(33,180,226,1)), color-stop(92%, rgba(113,206,239,1)), color-stop(100%, rgba(183,222,237,1)));
    background: -webkit-linear-gradient(45deg, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 49%, rgba(113,206,239,1) 92%, rgba(183,222,237,1) 100%);
    background: -o-linear-gradient(45deg, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 49%, rgba(113,206,239,1) 92%, rgba(183,222,237,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 49%, rgba(113,206,239,1) 92%, rgba(183,222,237,1) 100%);
    background: linear-gradient(45deg, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 49%, rgba(113,206,239,1) 92%, rgba(183,222,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed', GradientType=1 );
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
    cursor: hand;
}

.choice div {
    position: absolute;
    background: transparent;
    width: 100%;
    height: 100%;
    padding: 5px;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
}

.centerer {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.centered {
    display: inline-block;
    vertical-align: middle;
    color: white;
}

移动视图（首选）：

桌面视图（希望看起来像移动视图）：

Answer 1

使用标记的最简单解决方案是设置row 的宽度。您的选择是 128 像素，总边距为 16 像素，因此将 row 的宽度设置为两倍，并且可能更多一点，以允许在 inline(-block) 元素之间添加大约 4 像素的空白。

.row
{
     width:300px;
}

Demo

我不会说这是最优雅的解决方案，它只是最简单的修复，无需重构代码。您还可以尝试使用float:left 而不是inline block 和.choice:nth-child(odd){clear:both}，以使所有其他元素都从新行开始。

Demo

Answer 2

Most elegant?也许是一个框架

Bootstrap

实现这一点

<div clas="row">
    <div class="col-md-3 col-xs-6">
        1
    </div>
    <div class="col-md-3 col-xs-6">
        2
    </div>
    <div class="col-md-3 col-xs-6">
        3
    </div>
    <div class="col-md-3 col-xs-6">
        4
    </div>

</div>

Answer 3

有几种使用角度的解决方案，但也许最简单的方法是在第三个元素的开头插入换行符。

<br ng-if="($index) % 2 == 0 && $index != 0"/>

当使用ng-repeat 时，Angular 有一个名为 $index 的局部范围变量，每次重复时都会递增。我们对其进行了一些模块化划分，并确保它不会显示在第一个索引上，并且您拥有所需的内容。

<div class="jumbotron text-center" ng-hide="quizComplete">
    <h3>{{ questions[number].ask }}</h3>
    <div class="row">
        <div ng-repeat="answer in questions[number].answers" class="choice">
            <br ng-if="($index) % 2 == 0 && $index != 0"/>
            <div ng-click="recordChoice(answer.points)">
                <span class="centerer"></span>
                <span class="centered">{{ answer.choice }}</span>
            </div>
        </div>
    </div>
</div>