Question

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>

Answer 1

这应该这样做：

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

但是这里有一个更详细的例子:(为了简单起见，我将锚标记作为内嵌块并删除了图像。

http://jsfiddle.net/f8Cd3/

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

Answer 2

你应该使用 float：left ，更好的是用css定义大小。

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

以下是代码using float:left

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

Answer 3

在float: left;课程中使用lightbox-processed。

Answer 4

在标题和说明中使用单词scroll。你想要旋转木马效果吗？听起来你正在寻找这样的东西 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>

水平滚动div并固定div的高度

4 个答案: