gpt4 book ai didi

html - 大多数 'elegant' 方法来制作 2x2 框的 div

转载 作者:太空宇宙 更新时间:2023-11-03 23:31:00 24 4
gpt4 key购买 nike

我构建了一个“类似 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;
}

移动 View (首选): mobile view

桌面 View (希望看起来像移动 View ): desktop view

最佳答案

最简单的标记解决方案是设置的宽度。您的选择是 128px,总边距是 16px,所以将 row 的宽度设置为原来的两倍,也许再多一点,以便在 inline(-block) 之间添加大约 4px 的空白 元素。

.row
{
width:300px;
}

Demo

我不会说这是最优雅的解决方案,只是无需重构代码的最简单修复。您还可以尝试使用 float:left 而不是 inline block.choice:nth-child(odd){clear:both} 来获得每隔一个元素开始一个新行。

Demo

关于html - 大多数 'elegant' 方法来制作 2x2 框的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25354403/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com