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

div中有四个图像，我希望所有图像可以在同一行滚动，所有图像都不会下降到另一行，我该怎么做？水平滚动div并固定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>

来源

2013-03-25 hkguile

尝试更多' - 产品 - 图像{ float：left;}'。 – 2013-03-25 14:41:12

检查步骤在这里http://blog.themeforest.net/tutorials/vertical-centering-with-css/ – Neji 2013-03-25 14:46:41

您在标题和说明中使用滚动字。你想要一个旋转木马效果吗？听起来你正在寻找这样的事情 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-25 14:51:43

Flex滑块很不错。仅供参考，您将需要使用JavaScript来做你想做的事情。更具体地说，当您开始使用JavaScript时，请查找关于Jquery（一个流行且易于实现的JavaScript库）的教程。 – 2013-03-25 15:56:22

使用float: left;里面的lightbox-processed类。

来源

2013-03-25 14:41:21 VMV

请在jsfiddle之前测试您的代码或在发布之前... – 2013-03-25 14:44:18

这应做到：

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

但这里有一个更详细的例子：（我做了锚标签内嵌块和删除的图像进行简单

http://jsfiddle.net/f8Cd3/

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

来源

2013-03-25 14:42:33

仍然无法正常工作...最后的图片丢失到下一行 – hkguile 2013-03-25 14:45:22

@ hkinterview - 查看我修正的答案。 – 2013-03-25 15:02:01

你应该使用浮动：左，是更好的初步实践通过CSS定义大小。

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

下面是一个代码using float:left

，也许你应该考虑把像图像之间的保证金：保证金左：5px的

来源

2013-03-25 15:01:22 tassiodias

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

回答

相关问题