水平排列图像

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

所以我怎么能设置所有的图像水平（屏幕上的2个图像，其他人隐藏为容器属性溢出：隐藏）

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

enter image description here

代码

 <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>

来源

2011-11-07 John K

所以你说，前两个图像正确对齐，但其他的都是进一步下降，并且不与第一对齐二？他们是否与彼此对齐？例如，图像3+全部对齐，图像1和2对齐，但不是这两个组？ – sdo

通过使用white-space & 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/

来源

2011-11-07 11:11:03 sandeep

水平排列图像

回答

相关问题