html - 如何使 4 div(其中的图像)彼此相邻但在小屏幕上包裹起来

Question

我正在尝试在一个主 div 中使用 4 个 div 来显示彼此相邻的 4 个图像，“float:left;”它有效，但在较小的屏幕上我得到滚动条，而不是我希望图像(div's)在较小的屏幕上换行......

这是我的主要代码示例

<div class="first">
  <div class="sec">
    img 1
  </div>
  <div class="sec">
    img 2
  </div>
  <div class="sec">
    img 3
  </div>
  <div class="sec">
    img 4
  </div>
</div>

CSS:

.first {
width: 900px;
overflow: hidden;
}
.sec {
float:left;
width:200px;
display:block;
}

我在这里缺少什么？ (或做错了)

Answer 1

为 .first 类使用 max-width 而不是 width。

.first {
    max-width: 900px;
    overflow: hidden;
}

width 设置一个固定的宽度并且不允许元素既不宽也不小。因此，如果屏幕为 500 像素，该元素仍将为 900 像素(并且您会得到滚动条)。

max-width 另一方面，允许元素更小，但不能更宽。