Question

我有一个带有ims in divs的缩略图，所以当一个img在同一个窗口中按下它的显示大。我想滚动水平看到它们，而不是垂直作为默认值。我使用以下方法管理隐藏y滚动条：

overflow-x: auto; 
-ms-overflow-x: auto; 
overflow-y: hidden; 
-ms-overflow-y: hidden;

现在我如何让imges耗尽水平限制而不是垂直限制。我的照片被以下人员所掠夺：

<div class='item'>
<img src='picaddress.jpg' alt='picDescription' />
<p>'picDescription'</p>

附加代码：

<div id="imagegallery">
<div id="items">
        <div class='item'>
        <img src="images/img1.jpg" alt="Test Image"> 
        <p>'Test Image'</p>
        </div>
        <div class='item'>
        <img src="images/img2.jpg" alt="Test Image"> 
        <p>'Test Image'</p>
        </div>
        <div class='item'>
        <img src="images/img3.jpg" alt="Test Image"> 
        <p>'Test Image'</p>
        </div>
        <div class='item'>
        <img src="images/img4.jpg" alt="Test Image"> 
        <p>'Test Image'</p>
        </div>
        <div class='item'>
        <img src="images/img5.jpg" alt="Test Image">
        <p>'Test Image'</p>
        </div>
    </div>
</div>
</div>

CSS：

#imagegallery{
    background:#F2F2F2;
    padding:10px 10px 10px 10px;
}

#imagegallery #items{
    width: 100%;
    border: 1px solid #DFDFDF;
    background:white;
    height: 100px;
    overflow: auto;

}

#imagegallery #items .item {
    float: left;
    padding:5px;
    position: relative;
    width: 102px;
    height:77px;
    margin: 10px;
    background-color: #fff;
    cursor: pointer;
    border: 1px solid white;
    display: inline;
}

#imagegallery #items .item:hover{
    border: 1px solid #ddd;
}

#imagegallery #items .item img {
    max-width:100px;
    max-height:75px;
    width:100px;
}

#imagegallery #items p{
    display:none;
}

这是一个动态页面，所以图片的数量会发生变化。

Answer 1

我希望我理解你是对的，你希望将图像显示在彼此旁边而不是彼此之间。

为了完成这项工作，您可以在div上使用类“item”的float属性，如下所示：

div.item {
float: left;
width: 100px;
}

不要忘记清除物品后。

如果所有项目的宽度都大于周围div的宽度（使用overflow-x：scroll），你将得到你想要的。

在http://jsfiddle.net/deCube/Ctja7/创建的示例。

Answer 2

您可以在div中使用“ul”，并在“ul”中显示为manu“li”，如您所希望的那样。然后在下面显示另一行图像，只需重复“ul＆amp;”li“s

〔实施例：

<div id="images">
    <ul>
        <li><img src="images/rings/thumbnails/image1.jpg"></li>
        <li><img src="images/rings/thumbnails/image2.jpg"></li>
        <li><img src="images/rings/thumbnails/image3.jpg"></li>
        <li><img src="images/rings/thumbnails/image4.jpg"></li>
        <li><img src="images/rings/thumbnails/image5.jpg"></li>
    </ul>
</div>

然后你可以用css设置“div”，“ul”和“li”的样式。查看我有here的示例页面。每行图像都是“ul”，其中包含5“li”。如果您认为代码有用，我们非常欢迎您复制代码。

缩略图的水平滚动条

2 个答案: