Question

我从js动态生成html，有一个容器，我正在向它添加新元素，其中每个元素都有一个图像，里面最终会给出元素的大小。

我遇到的问题是在添加元素后容器的大小不会增大。我知道图像加载速度较慢但是一旦加载我就会发现它会重新计算占用的空间并更新容器。

在代码中，容器的宽度为500px，而.scroller和.row应该更宽，但它们是相同的。

我希望.row会随着它而增长.scroller也是如此，但它们保持相同的宽度。

https://jsfiddle.net/slash197/b8mb9ud9/6/

.hot-zone {
  width: 500px;
  height: 150px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}

.hot-zone .scroller {
  position: absolute;
  top: 0px;
  left: 0px;
}

.hot-zone .scroller .row {
  height: 100%;
  width: auto;
  position: relative;
}

.hot-zone .scroller .row .item {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: auto;
}

.hot-zone .scroller .row .item img {
  display: inline-block;
  vertical-align: top;
  max-height: 100%;
  max-width: 100%;
}

<div class="hot-zone">
  <div class="scroller">
    <div class="row">
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/439212e4-5ef7-41cd-8878-af96d485a512_hm0Z5tpRlSzPO97U5e2Q32Y0Xrb.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/e68ce54f-79d8-4d43-b98f-73b7d5271745_5z4Bj0zUupF7z4VW0REAdso1uxz.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/66df333e-d08f-48a1-b8c1-0ebce14ccc7e_5gJkVIVU7FDp7AfRAbPSvvdbre2.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/322ec0fa-3687-4a49-b070-c3b9188d916b_i0t7F6b4R1wURRESAiw9VJNuVoV.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/7e7a82e6-0f11-48bb-bed3-48bfaf3b374c_iMkl2Akc1f4CSJCieVwczM4KjZR.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/bedbd348-53c3-4765-9c8d-dc462ed7ecf9_gri0DDxsERr6B2sOR1fGLxLpSLx.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/c876d47d-f511-4402-9980-5bfc122965c5_tIKFBxBZhSXpIITiiB5Ws8VGXjt.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/439212e4-5ef7-41cd-8878-af96d485a512_hm0Z5tpRlSzPO97U5e2Q32Y0Xrb.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/e68ce54f-79d8-4d43-b98f-73b7d5271745_5z4Bj0zUupF7z4VW0REAdso1uxz.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/66df333e-d08f-48a1-b8c1-0ebce14ccc7e_5gJkVIVU7FDp7AfRAbPSvvdbre2.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/322ec0fa-3687-4a49-b070-c3b9188d916b_i0t7F6b4R1wURRESAiw9VJNuVoV.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/7e7a82e6-0f11-48bb-bed3-48bfaf3b374c_iMkl2Akc1f4CSJCieVwczM4KjZR.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/bedbd348-53c3-4765-9c8d-dc462ed7ecf9_gri0DDxsERr6B2sOR1fGLxLpSLx.jpg" style="height: 150px;"></div>
      <div class="item"><img src="//cloudtv.akamaized.net/test_client/images/Dutch/c876d47d-f511-4402-9980-5bfc122965c5_tIKFBxBZhSXpIITiiB5Ws8VGXjt.jpg" style="height: 150px;"></div>
    </div>
  </div>
</div>

Answer 1

更改

.hot-zone { width: 500px; height: 150px; position: relative; white-space: nowrap; overflow: hidden; }

以

.hot-zone { width: 500px; height: 150px; position: relative; white-space: nowrap; overflow: auto; }

您的父overflow : hidden属性会隐藏其中的所有子内容。

Answer 2

我尝试了你的jsfiddle，当我从.hot-zone容器中删除固定宽度时，另外两个类与parent一起成长。您的期望是正确的，容器应该增长。另外我建议看一下flexbox并用flexbox替换你的实现。 Flexbox将帮助您控制flex-items的行为/增长等。

奇怪的CSS元素大小问题

2 个答案: