html - 显示(几乎)均匀的一系列缩略图

Question

我想在画廊中显示一系列缩略图，并希望它们在容器中均匀显示，同时恰好适合该容器的宽度。

我在这里找到了一个很好的解决方案(来自 Marcelo Amorim 的解决方案，不是流行的解决方案):

Distributing images evenly & horizontally in a Div via CSS

这基本上是他提出的解决方案:

#container {
    text-align: justify;
}
.pic_bloc {
    width: 130px; 
    height:160px;
    display: inline-block;
    vertical-align: top;
    margin-bottom:30px;
}

.pic_bloc img{
    width:130px;
    height:160px;
}

#container:after {
    content: "";
    width: 100%;
    display: inline-block;
}

这是我的 HTML:

<div id="container">              
    <div class="pic_bloc"><img src="1.jpg"/></div>
    <div class="pic_bloc"><img src="2.jpg"/></div>
    <div class="pic_bloc"><img src="3.jpg"/></div>
    <div class="pic_bloc"><img src="4.jpg"/></div>
    <div class="pic_bloc"><img src="5.jpg"/></div>
    <div class="pic_bloc"><img src="6.jpg"/></div>
    <div class="pic_bloc"><img src="7.jpg"/></div>
</div>

问题是它太有效了。

例如，如果我有两行和 7 个缩略图，第一行将平均显示 5 个缩略图，第二行将显示两个分配在极端位置的缩略图，而该行的中间完全空白。

结果如下:

这不是人们直觉上对标准图库或列表的期望。那么有没有什么方法可以获得相同的行为，但最后一行的缩略图像这样向左对齐？

这对于画廊来说更有意义。

由于脚本使用了对齐对齐，我怀疑它需要一种完全不同的方法，但我自己或网上都没有找到一个干净的解决方案。

PS:jQuery 或 CSS，任何有效的都可以。

谢谢。

http://jsfiddle.net/uG2U4/

Answer 1

更新了表格布局的答案

我没有想出比使用表格结构并相应地定位图像更好的方法了。

编辑 -> 这个例子不适用于 IE8，因为后者不支持 :last-child 伪类。

您可以使用 Javascript 添加对 IE8 的支持 ->

Javascript

table_ = document.getElementById('tbl');
tr_ = table_.getElementsByTagName('tr');

for(var i=0;i<tr_.length;i++){

    tr_[i].lastChild.style.width = '1px';
    wrapperDiv = tr_[i].lastChild.getElementsByTagName('div')[0];
    wrapperDiv.style.position = 'relative';
    wrapperDiv.style.left = '1px';

    }

UPDATE

---

HTML

<table class='table' id='tbl' cellpadding='0' cellspacing='0'>
    <tr>

        <td><div class='parentWrapper'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>
        <td><div class='parentWrapper centerDiv'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>
        <td><div class='parentWrapper centerDiv'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>
        <td><div class='parentWrapper centerDiv'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>
        <td><div class='parentWrapper rightDiv'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>

    </tr>  

    <tr>
       <td><div class='parentWrapper'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>
        <td><div class='parentWrapper centerDiv'><img src='http://www.openvms.org/images/samples/130x130.gif'></div></td>
        <td></td>
             <td></td>
             <td></td>
        <td></td>
    </tr>  

</table>

CSS

.table{
    width:100%;
    height:auto;
    border:1px solid;    
}

.table td {
    width:auto;
    height:170px;
    vertical-align:top
}

.table td:last-child{
    width:1px;  
}

.table td:last-child div{
    position:relative;
    left:1px;  
}

.parentWrapper{
    width:50px;
    height:160px;
    border:1px solid brown;  
}

.table img {
    width:50px;
    height:160px;
    border:0px solid red;   
}

如果你不明白什么，请告诉我。