图像未填满到行尾

Question

I am currently making a website for an architecture firm, HLArchitects.
In the projects page I have created an HTML / Javascript image gallery.
It can be viewed here for reference: http://www.hla.co.za/projects/Hyuandai_Training_Centre/

My problem is that the smaller thumbnail images underneath the large image leaves a big gap on the right in the first row. My final goal is to have one row, which scrolls with javascript, and cut away the other 2 rows. Here is the css for that div:

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

When I go overflow: hidden it cuts away the other rows but still leaves the big gap at the end of the top row, How would I do it so that the images fill right to the end of the 750px even if the last image gets cut half way?
Thank you in advance

Answer 1

Like this:

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

Answer 2

You should update this three block property,

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

Hope this would be help you!

Answer 3

Here's a way to keep your image in only one row.

<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

After you need to play with your CSS to adjust the ideal margin between image to make them arrived at the exact needed position.