html - 无法让 DIV 宽度根据浏览器大小和 CSS 中的内容动态变化

Question

我有一个 div，我希望它在左边有一定的边距。它将包含许多 210x210 像素 的图像。我希望 div 调整大小，使其右侧仅延伸几个像素，我将其设置为 img 标签的边距。出于某种原因，div 我一直延伸到页面末尾。

问题中的 div 是 id="thumbnails 的那个，它包含在另一个 div 中， id= “main”。请检查 jsfiddle 以了解整个代码。但是，这里是代码的相关部分:

HTML:

<div id="main">
<div id="thumbnails">
    <img class="thumb" id="1" src="images/portfolio/lorem/thumbs/1.jpg">
    <img class="thumb" id="2" src="images/portfolio/lorem/thumbs/2.jpg">
    <img class="thumb" id="3" src="images/portfolio/lorem/thumbs/3.jpg">
    <img class="thumb" id="4" src="images/portfolio/lorem/thumbs/4.jpg">
</div>

CSS:

#main {
background-color: rgba(50,50,50,0.6);
width: 100%;
height: 100%;
overflow: hidden;
}

#thumbnails {
margin-left: 300px;
margin-top: 50px;
background: rgba(50,50,50,0.6);
}

我还应该注意，当浏览器尺寸较小时，我更喜欢图像在下一行继续显示。

Answer 1

我可能没有正确理解你(所以我的回答可能看起来有点明显)，但默认情况下 <div>是 block 级元素，宽度为 100%。

因此，您要么需要调整 #thumbnails 的显示属性以适应动态宽度(例如 inline-block )，或使用脚本动态设置。请做第一个选项。