css - 如何以流畅的布局实现此 CSS？

Question

我已经构建了一个卡片循环的用户界面，但是我正在努力使用户界面适用于流畅的屏幕布局。谁能建议我如何将一系列 div 安排到一个高度和宽度可以变化的外部容器中？为了让事情变得更简单，容器将始终遵循纵向尺寸。

我还添加了一个 jsFiddle 链接，让您可以尝试编辑 html/css。

http://jsfiddle.net/w2we2gyd/

<div class="card-preview">
    <p>1</p>
    <div class='circle'></div>
    <div class='card-preview-top'></div>
    <div class='card-preview-bottom'></div>
</div>

Answer 1

首先:我不喜欢你的 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%;
}

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

唯一的问题是你想要以像素为单位的边距，好吧，你可以通过以下方式解决这个问题:

.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);
}