Question

我想创建一个包含12个缩略图（4X3）的页面我希望他们在某些div中平等而精力地使用。

我知道使用<table>标签进行样式化是一种不好的做法。

我该如何传播它们？
我想要variuse windows风格文件类型图标（办公文档，jpg，视频，音频）的缩略图。任何有用的入门框架？

TIA

Answer 1

如果您的数据是表格式的，也就是表格中的数据，那么一定要使用<table>（这就是为什么他们把它放在规格中），但是如果你要制作类似画廊的东西，那么它只是要点是显示图像，继续阅读。

不需要框架。只需将它们全部漂浮在第4张图像上即可清除。

<强> Here's a working example

它使用CSS nth-child伪选择器，这在IE8中不受支持，但是再次，display: table-*也没有，所以你很好。此示例中使用的代码（仅限CSS）：

#grid img {
    width: 50px;
    float: left;
    border: 2px solid black;
    margin: 5px;
    padding: 2px;
}
#grid img:nth-child(4n+1) { /* Counting starts from 0 */
    clear: both;
}

Answer 2

除了Truth的回答：如果你也想要IE8支持，我会这样做：http://jsfiddle.net/HcP7q/

如果你也想要IE6 + 7的支持，我会去一张桌子 - 如果你需要一个表格布局，使用表格没有任何问题。

Answer 3

您可以使用以下内容：

http://jsfiddle.net/45TwK/1/

但这一切都取决于您的便利性

Answer 4

只需使用div即可。这可以确保您的布局灵活。

HTML

<div class="gallery">
  <div class="first"><img src="someimage.png" alt="alt-text"></div>
  <div><img src="someimage.png" alt="alt-text"></div>
  <div><img src="someimage.png" alt="alt-text"></div>
  <div class="last"><img src="someimage.png" alt="alt-text"></div>
  <div class="first"><img src="someimage.png" alt="alt-text"></div>
  <div><img src="someimage.png" alt="alt-text"></div>
</div>

CSS

.gallery { overflow: hidden; width: 230px; padding: 10px; }
.gallery > div { width: 40px; margin-right: 10px; float: left; }
.gallery > div.last { margin-right: 0; }

这种技术使用了更多的HTML（.first和.last类，但你不得不责怪IE而不是我。

css：没有<table> </table>的图库视图

4 个答案: