html - 根据屏幕大小将 -s 并排对齐

Question

我正在创建响应式设计布局，但努力实现某些目标。

我想制作一个照片库，每行显示尽可能多的照片，每张照片的最小宽度为 300 像素。宽度应取决于屏幕尺寸。

例如，iPhone 屏幕只能容纳此宽度的 1 张图片，因此它应该每行显示 1 张照片，填满 iPhone 屏幕的 100% 屏幕宽度，并将其他照片换成单独的行。我希望我已经足够清楚了。

这是我的代码:

 <div style="width:100%;">

    <div style="display:inline-block;width:32%;">
         <img style="min-width:300px;max-width:100%;" src="/images/test.png" />
    </div>

    <div style="display:inline-block;width:32%;">
         <img style="min-width:300px;max-width:100%;" src="/images/test.png" />
    </div>

    <div style="display:inline-block;width:32%;">
         <img style="min-width:300px;max-width:100%;" src="/images/test.png" />
    </div>

 </div>

这在纯 CSS 中可行还是需要 JS？

Answer 1

<div style="display:inline-block;width:32%;float:left">
     <img style="min-width:300px;max-width:100%;" src="/images/test.png" />
</div>

<div style="display:inline-block;width:32%;float:left">
     <img style="min-width:300px;max-width:100%;" src="/images/test.png" />
</div>

<div style="display:inline-block;width:32%;float:left">
     <img style="min-width:300px;max-width:100%;" src="/images/test.png" />
</div>

一旦漂浮，就再也回不去了。