Css:没有<表格>的画廊视图

css: gallery view without <table>

本文关键字：视图 表格 Css 没有      更新时间：2023-09-26

我想创建一个12个缩略图(4X3)的页面。
我希望它们在某个div中均匀而美观地分布。

我知道使用<table>标记样式是一个不好的做法。

  1. 我如何传播它们?
  2. 我想要各种窗口风格的文件类型图标的缩略图(办公文档，jpg，视频，音频)。有什么有用的入门框架吗?

TIA

如果您的数据是表格式的，也就是适合于表格，那么无论如何都要使用<table>(这就是为什么他们把它放在规格中)，但如果您正在制作像画廊这样的东西，其唯一的目的是显示图像，请继续阅读

不需要框架。只需将它们全部浮动，并每隔4个图像清除一次。

下面是一个工作示例

它使用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;
}

你可以这样写:

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

但这完全取决于你的方便

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

如果你也想要IE6+7的支持，我会选择表格——如果你需要一个表格式的布局，使用表格并没有什么错。

只使用div 's，这可以确保你在布局上的灵活性。

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，而不是我)

相关文章：