圖像沒有填充到行末

我目前正在爲建築公司HLArchitects製作網站。
在項目頁面我創建了一個HTML/Javascript圖片庫。
可以看這裏供參考：http://www.hla.co.za/projects/Hyuandai_Training_Centre/
圖像沒有填充到行末

我的問題是，小縮略圖大圖像下面留下第一行中的權有很大的差距。我的最終目標是有一行，它用javascript滾動，並切掉其他兩行。下面是該分區的CSS：

#imageFlow { 
     width: 750px; 
     height: 50px; 
     position: relative; 
     padding: 3px; 
     float: right; 
    }

當我去overflow: hidden它切掉其他行，但仍保留着很大的差距，在最上面一行的末尾，我會怎麼做，以便圖像填權即使最後一張圖像被剪切到一半，也會到750px的結尾？
預先感謝您

來源

2014-04-09 YSK .CO

像這樣：

#imageFlow { 
     width: 750px; 
     height: 50px; 
     position: relative; 
     padding: 3px; 
     float: right; 
     overflow:hidden; 
     white-space:nowrap; 
    }

來源

2014-04-09 17:08:32

我喜歡這些簡單的解決方案。 – Gil

謝謝你簡單而有用的答案！我已更新網站以反映它。唯一的問題是，它超過寬度時不會截斷圖像。你有解決方案嗎？ –

你是什麼意思與截斷圖像（我沒有看到任何需要截斷的圖像） –

您應該更新這三塊財產，

#imageFlow { 
    width: 750px; 
    height: 50px; 
    position: relative; 
    padding: 3px; 
    float: right; 
    display: inline-block; 
    overflow: hidden; 
} 

#imageFlow img:first-child { 
    margin-right: 8px; 
} 

#imageFlow img { 
    margin: 6px 3px 6px 0.8px; 
}

希望這會幫助你的！

來源

2014-04-09 17:09:02

這裏有一種方法可以只保留一行圖像。

<div class="wrapper"> 
    <div class="inline-wrap"> 
     <img src="http://www.hla.co.za/projects/Hyuandai_Training_Centre/images/DSC_0380.jpg" height="50"/> 
     <img src="http://www.hla.co.za/projects/Hyuandai_Training_Centre/images/DSC_0380.jpg" height="50"/> 
     <img src="http://www.hla.co.za/projects/Hyuandai_Training_Centre/images/DSC_0380.jpg" height="50"/> 
     <img src="http://www.hla.co.za/projects/Hyuandai_Training_Centre/images/DSC_0380.jpg" height="50"/> 
     <img src="http://www.hla.co.za/projects/Hyuandai_Training_Centre/images/DSC_0380.jpg" height="50"/> 
     <img src="http://www.hla.co.za/projects/Hyuandai_Training_Centre/images/DSC_0380.jpg" height="50"/> 
     <img src="http://www.hla.co.za/projects/Hyuandai_Training_Centre/images/DSC_0380.jpg" height="50"/> 
     <img src="http://www.hla.co.za/projects/Hyuandai_Training_Centre/images/DSC_0380.jpg" height="50"/> 
     <img src="http://www.hla.co.za/projects/Hyuandai_Training_Centre/images/DSC_0380.jpg" height="50"/> 
     <img src="http://www.hla.co.za/projects/Hyuandai_Training_Centre/images/DSC_0380.jpg" height="50"/> 
    </div> 
</div> 

<style type="text/css"> 
.wrapper { 
    width:600px; 
    overflow-x:scroll; 
    overflow-y:hidden; 
} 

.inline-wrap { 
    width:800px; 
} 
</style>

JSFiddle

之後你需要用CSS來調整圖像之間的理想利潤率，使他們到達的確切位置需要發揮。

來源

2014-04-09 17:09:11 SauriolJf

圖像沒有填充到行末

回答

相關問題