php - 如何创建没有间距/填充的图片网格？ (WordPress)

Question

我在 WordPress 网站上工作，有些事情无论我怎么努力都无法弄清楚。我想要一个类似于此(http://www.elegantthemes.com/gallery/origin/)但更像这样的网格:(http://themeforest.net/item/hercules-portfolio-business-wordpress-theme/full_screen_preview/5124743)。您会看到在 hercules 主题中，网格仅位于页面顶部。我想做一些类似于页面中间的事情。不幸的是我不能切换主题来获得那个功能。所以我想知道如何创建自己的版本。有人能指出我正确的方向吗？

附言网格不需要任何花哨的缩放动画，甚至不需要可链接。只是像 4x2 网格中那样的静态图片。图像之间没有间距、填充或边距。我联系了那个主题的设计者，他提到它不是一个插件。这是自定义 CSS3。不过，他并没有提供更多帮助:/

Answer 1

我会使用无序列表来包含图像、 float 列表项并应用 25% 的宽度。然后图像需要 100% 宽度，最大宽度 100% 和高度:自动响应布局。您上传的图片需要具有相同的高度尺寸(或者您可以在列表项上设置固定高度，但可能会丢失一些图片内容)。

ul#picture_grid {

list-style: none;
width: 100%;
overflow: hidden;

}

#picture_grid li {

float: left;
width: 25%;

}

#picture_grid img {

display: block;
width: 100%;
max-width: 100%;
height: auto;

}