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>
答案 0 :(得分:1)
这应该这样做:
.more-product-images img {
float: left;
}
但是这里有一个更详细的例子:(为了简单起见,我将锚标记作为内嵌块并删除了图像。
我还建议从各个图像中取出宽度和高度属性,并通过css简单地应用宽度和高度。
答案 1 :(得分:1)
你应该使用 float:left ,更好的是用css定义大小。
.more-product-images img {
width: 120px;
height: 92px;
float: left;
}
以下是代码using float:left
也许你应该考虑在图像之间设置一个边距,如: margin-left:5px
答案 2 :(得分:0)
在float: left;
课程中使用lightbox-processed
。
答案 3 :(得分:0)
在标题和说明中使用单词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>