奇怪的CSS元素大小问题

-2

我从js动态生成html，有一个容器，并且我向它添加了新元素，每个元素都有一个图像，其中最终会给出元素的大小。奇怪的CSS元素大小问题

我遇到的问题是容器在添加元素后不会增长。据我所知，图像加载速度较慢，但一旦加载，我期望它会重新计算占用的空间并更新容器。

在代码中，容器的宽度是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>

来源

2017-09-23 slash197

在我的浏览器中，.row水平增长，我得到一个水平滚动条来查看所有图片。我不知道这是你的浏览器的问题，还是我们不太了解问题。否则@ VladimirRadan的答案是正确的。 – ArchNoob

不完全清楚你想要做什么。 – Sheedo

搞砸了小提琴，它的更新 – slash197

-4

更改以下代码：

从

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

到

.hot-zone { 
    width: 500px; 
    min-height: 150px; 
    position: relative; 
}

来源

2017-09-23 06:05:05 VladimirRadan

您的downvotes发表于评论'你好像是你的js代码？也许我可以帮忙......尝试删除“white-space：nowrap;”这不是一个答案，而是一个真正的评论。如果你的更新实际上有效，把它放在一个代码片段中（点击编辑器中的<<>并显示它的工作原理 – mplungjan

变化

.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财产掩饰内心的所有子内容。

来源

2017-09-23 06:35:05 Thusitha

这正是我想要的，来隐藏溢出，所有这些都会添加滚动条，所以我可以滚动它，不是我想要的，而行的大小仍然是相同的，因为滚动条实际上更小 – slash197

那么额外的图像会发生什么，它们会进入第二行吗？我不清楚。 – Thusitha

我试过你的jsfiddle，当我从.hot-zone容器中移除固定宽度时，另外两个类与父类一起增长。你的期望是正确的容器应该增长。此外，我会建议看看flexbox，并用flexbox替换您的实施。 Flexbox可以让你控制flex-items的行为/增长等。

来源

2017-09-23 06:53:49

奇怪的CSS元素大小问题

回答

相关问题