Question

我想为固定宽度的图片辩护（谷歌图片的确如此，例如：here）

对此有一些简单的解决方案吗？

最后一种方法是编写一个jquery脚本，计算它可以放入一行中的图像数量，并在图像中单独迭代。对于可以使用text-align：justify ...

通过文本完成的事情来说，似乎有点矫枉过正

Answer 1

使用display：inline-block;对于带有图像和text-align：justify的元素;对于父元素。示例：

<ul class="images">
    <li><img src="..."/></li>
    ...
</ul>

和CSS：

.images{text-align: justify;}
.images li{display: inline-block;}

Answer 2

如果你想找到一个强大的工具来证明固定宽度的图像，这个jQuery插件可以帮助你：https://github.com/brunjo/rowGrid.js

<强> Demo

Answer 3

确保您定义了一个外部容器，说出一个具有固定宽度的div或部分，并尝试将图像容器浮动到其中以实现它

<div id="outer-container" style="width:800px;height:400px;">
   <div id="image-container" style="float:left;width:100;margin-right:10px;margin-bottom:10px;">
      <img  src="your_image_src" width="100" height="100"/>
   </div>
   <div id="image-container" style="float:left;width:100;margin-right:10px;margin-bottom:10px;">
      <img  src="your_image_src" width="100" height="100"/>
   </div>
   <div id="image-container" style="float:left;width:100;margin-right:10px;margin-bottom:10px;">
      <img  src="your_image_src" width="100" height="100"/>
   </div>
</div>

你可以使用display：inline-block而不是float：left来实现它。但是display：inline-block可以根据你的情况使用。

Answer 4

从长远来看，它会有很多问题，这些问题最初都没有考虑过。看看我的插件Justified Image Grid（做一个谷歌搜索）。我尽力复制flickr如何通过动态行高和最小裁剪来显示它。

对齐行中图像的对齐方式（ala Google Images）

4 个答案: