水平滾動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的高度

回答

相關問題