How to align multiple images horizontally (in a row)?

Question

How can one align multiple images, one after another, horizontally? They don't have to fit the width screen: on the contrary, I would like to have them exceed the width of the latter, if that makes any sens.

I have checked quite a few answers to similar questions but couldn't find any that would fix my problem.

Html:

<div id="content">
    <img src="Content/Images/Personal/Georges.jpg" alt="Georges" class="images" />
    <img src="Content/Images/Personal/Rose.jpg" alt="Gers" class="images" />
    <img src="Content/Images/Personal/Henry.jpg" alt="Providence" class="images" />
</div>

Css:

.images
{
display: inline;
margin: 0px;
padding: 0px;
}

#content
{
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
}

Thank you in advance.

Answer 1

There are many ways to align the images in one line. Check the DEMO using display:inline-block Method.

1. using `float:left` /*you have to clear the float using `overflow:hidden` on parent element */
2. using `display:inline-block`
3. using `Flex` /*Its a new CSS3 property */

Note: I would suggest you as per your requirement you should change your HTML markup and need to use ul listing here.

Answer 2

edit css of image as:

.images
{
display: inline-block;
float:left;
margin: 0px;
padding: 0px;
}

Answer 3

just by changing display: block; and adding float:left attribute to css .images class

Answer 4

Effectively, you want to prevent the inline img elements from wrapping, as such, you want to use the below on the parent #content element:

white-space:nowrap;

Demo Fiddle

More on white-space from MDN

nowrap Collapses whitespace as for normal, but suppresses line breaks (wrapping).

This style is specifically for the purpose you require.

Answer 5

Try like this: Demo

CSS:

#content img
{
display: inline-block;
    margin-right:5px;
    border:1px solid #ccc;
}