我正在创建响应式设计布局,但努力实现某些目标。
我想制作一个照片库,每行显示尽可能多的照片,每张照片的最小宽度为 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?
最佳答案
<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>
一旦漂浮,就再也回不去了。
关于html - 根据屏幕大小将 <div>-s 并排对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24044433/