水平对齐图像

Question

我正在创建一个图像滑块，一次只显示2个图像，左右两个箭头可以移动图像，我必须水平放置图像，但只有两个图像是内联的，其他图像正在下降，我设置溢出隐藏到图像容器，我不能设置容器的宽度，因为图像的数量可能非常动态

那么如何水平设置所有图像（屏幕上有2个图像，其他图像被隐藏为容器属性溢出：隐藏）

蓝色是容器，绿色框是图像。

码

        <div id="slidearea">
<div id="slider">

        <img alt="image" id="0" src="images/thum-1.jpg" style="margin-right: 5px; opacity: 0.5; border-color: rgb(255, 255, 255);">

        <img alt="image" id="1" src="images/thum-2.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="2" src="images/thum-3.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="3" src="images/thum-1.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="4" src="images/thum-2.jpg" style="margin-right: 5px; opacity: 0.5;">

        <img alt="image" id="5" src="images/thum-3.jpg" style="opacity: 0.5;">
        </div>
        </div>

Answer 1

您可以使用white-space＆amp; inline-block属性。

例如：

#container{
    overflow:hidden;
    width:300px;
    margin:30px auto;
    background:yellow;
}
#container #slider{
    white-space:nowrap;
}
img{
    opacity:0.5;
    display:inline-block;
    *display:inline;/*IE*/
    *zoom:1;/*IE*/
    background:red;
}

检查小提琴http://jsfiddle.net/SNeVH/1/