如何在流畅的布局中实现这个 CSS？答案

【问题标题】：How can I achieve this CSS in a fluid layout?如何在流畅的布局中实现这个 CSS？
【发布时间】：2015-03-06 19:05:06
【问题描述】：

我已经构建了一个卡片循环的 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>

【问题讨论】：

请提供您的代码。
@ʎǝʞuoɯɹǝqʎɔ 我可以，但是它很笨重。我会添加它，如果有帮助，您可以告诉我。
@ʎǝʞuoɯɹǝqʎɔ 修改了问题，现在包含一个示例 jsFiddle 和标记。
无论如何你都在用%做大部分事情，所以为什么不将height: 100%;添加到你的html,body，然后让你的容器100%和你的卡在height中'29%' .然后将数字居中是一个使用相对位置的问题，外部盒子使用left: 50%; 和top: 50%; 的绝对位置，然后使用transform: translate(-50%,-50%) 将臭虫居中。

标签： css fluid-layout ionic

【解决方案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);
}

【讨论】：

我不得不采用 SCSS 编译产生的输出 CSS，这就是为什么它的格式不理想。
@brianscott 嗯，你应该改变你的 CSS 输出 :) 我觉得这很奇怪。不过没关系。
好的，我明白了。此外，jsFiddle 顶部有一个整理按钮，可以方便地重新格式化所有内容，以防万一你不知道。 :-)
@brianscott 其实我不是 :) 这个答案对你有帮助吗？