高度/宽度纵横比不适用于宽度：100% 和 padding-top CSS 技巧

Question

.line-score-card {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.325), 0 1px 5px 0 rgba(0, 0, 0, 0.325), 0 3px 1px -2px rgba(0, 0, 0, 0.325);
  width: 100%;
  padding-top: 40%;
  padding-left: 5px;
  padding-right: 5px;
}

.line-score-card .card-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #CCCCCC;
  padding: 4px 0px;
}

.line-score-card .card-row .card-value {
  flex: 1;
  text-align: center;
}

.line-score-card .card-row .card-value.score-total {
  font-weight: 700;
}

<div style="width: 300px">
  <div class="line-score-card">
    <div class="card-row" style="border-top: none;">
      <div class="card-value"></div>
      <div class="card-value">Half 1</div>
      <div class="card-value">Half 2</div>
      <div class="card-value score-total">Total</div>
    </div>
    <div class="card-row">
      <div class="card-value">
        <a href="/stats/teams/UNC/overview"><img src="https://s3.amazonaws.com/cbbteamlogos/UNC-logo.png" style="width: 33px;"></a>
      </div>
      <div class="card-value">44</div>
      <div class="card-value">29</div>
      <div class="card-value score-total">73</div>
    </div>
    <div class="card-row" style="border-bottom: none;">
      <div class="card-value">
        <a href="/stats/teams/DUKE/overview"><img src="https://s3.amazonaws.com/cbbteamlogos/DUKE-logo.png" style="width: 33px;"></a>
      </div>
      <div class="card-value">44</div>
      <div class="card-value">30</div>
      <div class="card-value score-total">74</div>
    </div>
  </div>
</div>

大家好，

在上面的示例中创建响应式 div 时遇到问题。一般来说，随着包装 div（设置 width: 300px 的 div）改变宽度，我希望内部 div（类 line-score-card）保持 2.5 比 1 的宽高比。To（尝试）这样做，我设置了width: 100% 和padding-top: 40%，根据很多文章建议为 div 创建这种类型的纵横比的方法是以这种方式使用 padding-top。

在我的示例中，line-score-card div 中的内容（行及其各自的内容）显示在填充下方，我认为这是有道理的，但结果显然不是我想要的。对此的任何帮助将不胜感激！

Answer 1

添加 position:relative to ".line-score-card" 创建一个新的 div 包装器（我称它为 "inner-content" 但你可以叫它任何名称）来包装内部卡行，然后应用 position:absolute 到新创建的包装器。这将允许父容器保持与填充的比例，并将内容适当地定位在内部。小心溢出。

.line-score-card {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.325), 0 1px 5px 0 rgba(0, 0, 0, 0.325), 0 3px 1px -2px rgba(0, 0, 0, 0.325);
  width: 100%;
  padding-top: 40%;
  padding-left: 5px;
  padding-right: 5px;
  position: relative; 
}

/* add this to reflect the new inner div */
.line-score-card .inner-content {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
}

.line-score-card .card-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #CCCCCC;
  padding: 4px 0px;
}

.line-score-card .card-row .card-value {
  flex: 1;
  text-align: center;
}

.line-score-card .card-row .card-value.score-total {
  font-weight: 700;
}

<div style="width: 300px">
  <div class="line-score-card">
    <!-- Begin inner wrapper for absolute positioning -->
    <div class="inner-content">
      <div class="card-row" style="border-top: none;">
        <div class="card-value"></div>
        <div class="card-value">Half 1</div>
        <div class="card-value">Half 2</div>
        <div class="card-value score-total">Total</div>
      </div>
      <div class="card-row">
        <div class="card-value">
          <a href="/stats/teams/UNC/overview"><img src="https://s3.amazonaws.com/cbbteamlogos/UNC-logo.png" style="width: 33px;"></a>
        </div>
        <div class="card-value">44</div>
        <div class="card-value">29</div>
        <div class="card-value score-total">73</div>
      </div>
      <div class="card-row" style="border-bottom: none;">
        <div class="card-value">
          <a href="/stats/teams/DUKE/overview"><img src="https://s3.amazonaws.com/cbbteamlogos/DUKE-logo.png" style="width: 33px;"></a>
        </div>
        <div class="card-value">44</div>
        <div class="card-value">30</div>
        <div class="card-value score-total">74</div>
      </div>
    </div>
    <!-- End inner wrapper for absolute positioning -->
  </div>
</div>