对齐问题，不同大小的图像

I have ul with following structure

我有以下结构的ul

<div class="gal">
<ul>
        <li>
            <a rel="lightbox[imgs]" href="http://192.168.0.204/CAPW/uploads/materials_pics/5fdc91f1f2e9471ca375d346d3558757.jpg">
                <img width="100" height="100" class="imgclass" src="http://192.168.0.204/CAPW/uploads/materials_pics/5fdc91f1f2e9471ca375d346d3558757_thumb.jpg">
            </a>    
        </li>
        <li>
            <a rel="lightbox[imgs]" href="http://192.168.0.204/CAPW/uploads/materials_pics/d3a43711dee8a4331f14329d40ed6314.jpg">
                <img width="100" height="100" class="imgclass" src="http://192.168.0.204/CAPW/uploads/materials_pics/d3a43711dee8a4331f14329d40ed6314_thumb.jpg">
            </a>    
        </li>
        <li>
            <a rel="lightbox[imgs]" href="http://192.168.0.204/CAPW/uploads/materials_pics/836bdef9b8ec56c0a88386760efb1f90.png">
                <img width="100" height="100" class="imgclass" src="http://192.168.0.204/CAPW/uploads/materials_pics/836bdef9b8ec56c0a88386760efb1f90_thumb.png">
            </a>    
        </li>

        </ul>

because I have different image thumb sizes I can't set width and height to <li> . Please refer to the screen-shot. It is not aligned properly

因为我有不同的图像拇指尺寸,我无法将宽度和高度设置为

。请参考屏幕截图。它没有正确对齐

The CSS used

使用的CSS

<style type="text/css">
    .gal ul li {
        padding: 5px;
        margin: 5px;
        position: relative; 
        float: left;
        list-style:none;
    }

    .imgclass {
        float: left;
        margin: 0 0 15px 0;
        padding: 2px;
        vertical-align:middle;
    }
    .gal {
        margin:0 auto;
        width: 850px;
        text-align:center;
    }

    </style>

My problem is how avoid that overlapping the small-size images

我的问题是如何避免重叠小尺寸图像

2 个解决方案

#1

instead of floating the li elements, have them display: inline; then to counteract the "whitespace in HTML" link trailing you can have the <a> display:inline-block and then you will be able to set that vertical-align: middle

而不是浮动li元素,让它们显示:inline;然后,为了抵消“HTML中的空格”链接尾随你可以有 display:inline-block然后你就可以设置vertical-align:middle

Example Fiddle:

CSS:

.gal ul li {
    padding: 5px;
    margin: 5px;
    position: relative; 
    display: inline; /* changed from float */
    list-style:none;
}

.gal ul li a {display: inline-block; vertical-align: middle;} /* added */

.imgclass { /* no need to float these **/
    margin: 0 0 15px 0;
    padding: 2px;
    border: 0;
}
.gal {
    margin:0 auto;
    width: 850px;
    text-align:center;
}

#2

You can use "display: inline-block". Not sure if it will work in all browser, there is problem in older firefox ( http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/). Example: http://jsfiddle.net/fs9RU/

您可以使用“display:inline-block”。不确定它是否适用于所有浏览器,旧版Firefox中存在问题(http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/)。示例:http://jsfiddle.net/fs9RU/