1

div中有四个图像，我希望所有图像都可以在同一行滚动，所有图像都不会下拉到另一行，我该怎么做？

<style>
.more-product-images {
    height:90px;
    background-color:#000;
    width:1000px;
    overflow:scroll;
    overflow-y:hidden;
}
</style>

<div class="more-product-images">
            <a href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_a12aec4157fe68e01dc1d608627a4734.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_a12aec4157fe68e01dc1d608627a4734.jpg" width="120" height="92" alt="" title=""></a>
            <a href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_b6f3583a3718298533f4f1f1ae58b690.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_b6f3583a3718298533f4f1f1ae58b690.jpg" width="120" height="92" alt="" title=""></a>
            <a href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_db4093c431282a16ff3e80767b3f8ecc.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_db4093c431282a16ff3e80767b3f8ecc.jpg" width="120" height="92" alt="" title=""></a>
            <a href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_df2173694b2e1cc56e443a4103f02ede.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_df2173694b2e1cc56e443a4103f02ede.jpg" width="120" height="92" alt="" title=""></a>
</div>
4

4 回答 4

1

这应该这样做：

.more-product-images img {
    float: left;
}

但这里有一个更详细的示例：（为了简单起见，我将锚标记设为内联块并删除了图像。

http://jsfiddle.net/f8Cd3/

我还建议从单个图像中删除宽度和高度属性，并简单地通过 css 应用宽度和高度。

于 2013-03-25T14:42:33.567 回答
1

您应该使用float: left并且更好的做法是通过 css 定义大小。

.more-product-images img {
     width: 120px;
     height: 92px;
     float: left;
}

这是使用 float:left的代码

也许您应该考虑在图像之间放置一个边距，例如：margin-left: 5px

于 2013-03-25T15:01:22.263 回答
0

float: left;在lightbox-processed课堂内使用。

于 2013-03-25T14:41:21.130 回答
0

You use the word scroll in title and description. Do you want a carousel effect? Sounds like you're looking for something like this http://flex.madebymufffin.com/examples/basic-carousel.html

<style>
.more-product-images {
height:90px;
background-color:#000;
width:1000px;
overflow:scroll;
overflow-y:hidden;
}

.boxes {width: 25%; display: flex-box;}
 </style>

<div class="more-product-images">
        <a           href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_a12aec4157fe68e01dc1d608627a4734.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img class="boxes" typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_a12aec4157fe68e01dc1d608627a4734.jpg" alt="" title=""></a>
        <a href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_b6f3583a3718298533f4f1f1ae58b690.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img class="boxes" typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_b6f3583a3718298533f4f1f1ae58b690.jpg" alt="" title=""></a>
        <a     href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_db4093c431282a16ff3e80767b3f8ecc.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img class="boxes" typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_db4093c431282a16ff3e80767b3f8ecc.jpg" alt="" title=""></a>
        <a    href="http://localhost/test/sites/default/files/styles/uc_product_full/public/45c857_df2173694b2e1cc56e443a4103f02ede.jpg" title="" rel="lightbox[0]" class="lightbox-processed"><img class="boxes" typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/uc_thumbnail/public/45c857_df2173694b2e1cc56e443a4103f02ede.jpg" alt="" title=""></a>
</div>
于 2013-03-25T14:51:43.747 回答