CODEWITHSUNDEEP
htmlcss
Beer Brother
Beer Brother

Reputation: 524

html - distribute five images horizontally across container?

I have div container and five images inside it. I need to distribute them within the container (it has dynamic width) so that the spacing between the images is the same, and the left image is justified to the left, and the right image is justified to the right.

UPD: Images must have fixed width (for example 100px), but container div is more than 500px.

Upvotes: 0

Views: 3464

Answers (2)

Mr_Green
Mr_Green

Reputation: 41842

Keep all the images in div's and then give width: 20%;, min-width:100px;,text-align: center and float:left /display: inline-block to those div elements. This should solve the problem.

div container
   --> div (5)
     --> images (5)

For your first child element, use :first-child pseudo class and for last child element, use :last-child pseudo class and then give text-align :left and text-aling: right respectively.

HTML

<div>
    <div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
    <div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
    <div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
    <div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
    <div><img src="https://www.google.com.au/images/srpr/logo4w.png" /></div>
</div>

CSS

div>div {
    width:20%;
    float:left; /* display: inline-block; */
    min-width:100px; /* equal to the width of the image */
    text-align:center;
}

img{width:100px;}

div:first-child{text-align:left;}
div:last-child{text-align:right;}

Working Fiddle

Updated Fiddle (Using javascript)

Upvotes: 1

Daniel Imms
Daniel Imms

Reputation: 50229

Just use width:20%; and float;left;.

jsFiddle

img {
    width:20%;
    float:left;

    box-sizing:border-box;
    border:1px solid #000;
}

You can add box-sizing:border-box now and your padding and border sizes will be includes in your width so they won't overflow to the next line.

Upvotes: 0

Related Questions