Question

我目前正在为一家建筑公司HLArchitects建立一个网站。
在项目页面中，我创建了一个HTML / Javascript图库。
可在此处查看以供参考：http://www.hla.co.za/projects/Hyuandai_Training_Centre/

我的问题是，大图像下面的较小缩略图图像在第一行的右侧留下了很大的间隙。我的最终目标是有一行，用javascript滚动，并切掉其他两行。这是该div的css：

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

当我走overflow: hidden时，它会切掉其他行，但仍会在顶行的末尾留下大的间隙，我该怎么做才能使图像填充到750px的末尾，即使最后一张图片被削减了一半？
提前谢谢

Answer 1

像这样：

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

Answer 2

您应该更新这三个块属性

#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;
}

希望这会对你有所帮助！

Answer 3

这是一种将图像保持在一行的方法。

<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来调整图像之间的理想边距，以使它们到达确切的所需位置。

图像未填满行尾

3 个答案: