html - 使用 在显示器和移动设备上以类似网格的方式排列图像

Question

我有一组图像，我想将它们排列成类似网格的方式。我想在全宽显示器上每行 6 张，但对于较小的屏幕(标签/智能手机)，图片应该自行排列。我尝试了以下代码:

<div style="width: 120px; float: left; margin-bottom: 10px; margin-right: 40px; position: relative;">

[caption id="" align="alignnone" width="110"]<a href="http://www.mysite.com"><img class="size-full wp-image-76" alt="ALT Text" src="ImageSource.jpg" width="110" height="110" /></a> Image Caption[/caption]

</div>

我为每张图片和每六个标签重复此代码，我使用 margin-right: 0px 并在第六个 <div> 之后标签我必须使用 <br>将其他图像带到全宽显示器的下一行。

问题是在标签页/智能手机上只显示一张图片，即使有足够的空间可以再显示两张图片。下一张图片向下移动。第六张和第七张图片相互粘在一起，中间没有任何空间。

Answer 1

使用无序列表作为容器，而不是 DIV。 (假设照片宽度为 100px)

ul, li (margin:0;padding:0;list-style:none}    
ul {max-width: 600px;}
li {float-left; width:100px;}

相应地调整边距