奇怪的CSS元素大小问题
我从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>
更改以下代码:
从
.hot-zone {
width: 500px;
height: 150px;
position: relative;
white-space: nowrap;
overflow: hidden;
}
到
.hot-zone {
width: 500px;
min-height: 150px;
position: relative;
}
您的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
财产掩饰内心的所有子内容。
我试过你的jsfiddle,当我从.hot-zone容器中移除固定宽度时,另外两个类与父类一起增长。你的期望是正确的容器应该增长。此外,我会建议看看flexbox,并用flexbox替换您的实施。 Flexbox可以让你控制flex-items的行为/增长等。
在我的浏览器中,.row水平增长,我得到一个水平滚动条来查看所有图片。 我不知道这是你的浏览器的问题,还是我们不太了解问题。否则@ VladimirRadan的答案是正确的。 – ArchNoob
不完全清楚你想要做什么。 – Sheedo
搞砸了小提琴,它的更新 – slash197