我已经构建了一个循环卡片的UI,但是我正在努力使UI适用于流畅的屏幕布局。任何人都可以建议我如何将一系列div安排到一个可以在高度和宽度上变化的外部容器中?为了使事情变得更容易,容器将始终遵循纵向尺寸。
我还添加了一个jsFiddle链接,允许您尝试编辑html / css。
<div class="card-preview">
<p>1</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
答案 0 :(得分:0)
首先:我不喜欢CSS的布局,尝试使用预处理器来构建代码,然后定期输出。除此之外,添加以下行,使其响应:
.card-preview p {
left: 50%;
top: 50%;
right: auto;
bottom: auto;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loop-container{
height:100%;
}
.loop-status, .card-preview {
height: 29%;
}
/* Loop container could be variable widths / height */
body, html {
height: 100%;
}
.loop-container
{
width:100%;
height:100%;
}
.loop-status, .card-preview {
position: relative;
top: 0;
left: 0;
float: left;
margin: 10px 5px 5px 5px;
width: 29%;
height: 29%;
background: #fff; }
.loop-status .circle, .card-preview .circle {
border-radius: 50%;
width: 75%;
height: 45%;
z-index: 2;
position: absolute;
top: 25%;
background-color: white;
left: 0;
border: solid 4px #00b9aa;
right: 0;
margin-left: auto;
margin-right: auto;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto; }
.loop-status .circle i, .card-preview .circle i {
display: none; }
.loop-status .circle.loop-correct, .card-preview .circle.loop-correct {
background-color: #00b9aa; }
.loop-status .circle.loop-correct i, .card-preview .circle.loop-correct i {
display: inline;
margin: auto;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
display: block;
color: white;
font-size: 50px;
padding: 10px; }
.loop-status .circle.loop-incorrect, .card-preview .circle.loop-incorrect {
background-color: #A23842; }
.loop-status .circle.loop-incorrect i, .card-preview .circle.loop-incorrect i {
display: inline;
margin: auto;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
display: block;
color: white;
font-size: 50px;
padding: 10px; }
.card-preview {
cursor: pointer;
border: solid 4px #00b9aa;
border-radius: 10px;
overflow: hidden;
-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease; }
.card-preview:hover {
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05); }
.card-preview p {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
color: #00534c;
font: 25px/105px sans serif;
display: inline-block;
z-index: 3;
line-height: 6.5em; }
.card-preview.current .card-preview-top {
-webkit-animation: pulsate 2s infinite;
-moz-animation: pulsate 2s infinite;
-o-animation: pulsate 2s infinite;
-ms-animation: pulsate 2s infinite;
animation: pulsate 2s infinite; }
.card-preview.answered .card-preview-top {
background-color: white; }
.card-preview.hinted .card-preview-top {
-webkit-animation: pulsateError 2s infinite;
-moz-animation: pulsateError 2s infinite;
-o-animation: pulsateError 2s infinite;
-ms-animation: pulsateError 2s infinite;
animation: pulsateError 2s infinite; }
.card-preview .card-preview-top {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 50%;
background-color: #727272;
z-index: 1; }
.card-preview .card-preview-bottom {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 50%;
background-color: #00b9aa;
z-index: 1; }
/* Added code below */
.card-preview p {
left: 50%;
top: 50%;
right: auto;
bottom: auto;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loop-container{
height:100%;
}
.loop-status, .card-preview {
height: 29%;
}
&#13;
<div class='loop-container'>
<div class="card-preview">
<p>1</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>2</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>3</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>4</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<!-- Cards should appear in a loop with an empty middle -->
<div class="loop-status" class='overview'>
</div>
<div class="card-preview">
<p>5</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>6</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>7</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
<div class="card-preview">
<p>8</p>
<div class='circle'></div>
<div class='card-preview-top'></div>
<div class='card-preview-bottom'></div>
</div>
</div>
&#13;
唯一的问题是你想要一个像素的边距,你可以通过以下方式解决这个问题:
.loop-status, .card-preview {
/* non-calc supporting fallback */
height: 29%;
/* calc supporting browsers will do this right */
height: calc(100% / 3 - 15px);
width: 29%;
width: calc(100% / 3 - 10px);
margin: 2%;
margin: calc(10px) calc(5px) calc(5px) calc(5px);
}