图像没有填充到行末

我目前正在为建筑公司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

图像没有填充到行末

回答

相关问题