CODEWITHSUNDEEP
htmlcss
Person
Person

Reputation: 2269

How to align two rows of images

So I have these two rows of divs with images jsfiddle You can see that on the left they aligned but on the right when you resize the window top or bottom will stick out. And I want them to be aligned on both sides. How do I fix it?

 <div class="latest_wrapper">
  <div class="latest_item"><img src="http://www.yenmag.net/wp-content/uploads/2013/09/Grumpy-Cat-thumbnail-190x190.jpg" alt="Men"></div>
  <div class="latest_item"><img src="http://www.yenmag.net/wp-content/uploads/2013/09/Grumpy-Cat-thumbnail-190x190.jpg" alt="Women"></div>
  <div class="latest_item"><img src="http://www.yenmag.net/wp-content/uploads/2013/09/Grumpy-Cat-thumbnail-190x190.jpg" alt="Watches"></div>
  <div class="latest_item bigger"><img src="http://31.media.tumblr.com/565b1f797c19420c4d5b89de430751cb/tumblr_inline_nilvxaeMRt1rzpxo3.jpg" alt="40 % off"></div>
  <div class="latest_item bigger"><img src="http://31.media.tumblr.com/565b1f797c19420c4d5b89de430751cb/tumblr_inline_nilvxaeMRt1rzpxo3.jpg" alt="Sales"></div>
 </div>



 .latest_wrapper {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
}

img {
  max-width: 100%;
  height: auto;
}
.bigger {
  width: 45%;
  margin-right: 5%;
}
.bigger:last-child {
  margin-right: 0;
}

Upvotes: 0

Views: 2806

Answers (2)

A.Sharma
A.Sharma

Reputation: 2799

You can float the right-most elements on both rows:

<div class="latest_wrapper">
  <div class="latest_item"><img src="http://www.yenmag.net/wp-content/uploads/2013/09/Grumpy-Cat-thumbnail-190x190.jpg" alt="Men"></div>
  <div class="break"></div>
<div class="latest_item"  style="text-align:center;"><img src="http://www.yenmag.net/wp-content/uploads/2013/09/Grumpy-Cat-thumbnail-190x190.jpg" alt="Women"></div><div class="break">
</div>
  <div class="latest_item"><img src="http://www.yenmag.net/wp-content/uploads/2013/09/Grumpy-Cat-thumbnail-190x190.jpg" alt="Watches" style="float:right;"></div>
  <div class="latest_item bigger"><img src="http://31.media.tumblr.com/565b1f797c19420c4d5b89de430751cb/tumblr_inline_nilvxaeMRt1rzpxo3.jpg" alt="40 % off"></div>
  <div class="latest_item bigger"><img src="http://31.media.tumblr.com/565b1f797c19420c4d5b89de430751cb/tumblr_inline_nilvxaeMRt1rzpxo3.jpg" alt="Sales" style="float:right;"></div>
</div>

It is important to note that the styling has directly been put into the HTML. I don't know what ID's you want to give them so I kept it inline into the HTML

And the CSS:

.latest_wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.latest_item {width: 33%;}

img {
  max-width: 100%;
  height: auto;
}

.bigger {
  width: 50%;
}

.break{
  clear:both;
}

See the fiddle: JSFiddle

Upvotes: 1

goncalopinto
goncalopinto

Reputation: 443

Actually is very simple to do, check below:

HTML:

<div id="imagesDIV">
   <img src="myimage1.jpg" alt=""/>
   <img src="myimage2.jpg" alt=""/>
   <img src="myimage3.jpg" alt=""/>
   <img src="myimage4.jpg" alt=""/>
     .
     .
     .
</div>

CSS:

#imagesDIV {
   width: 960px; // standar width for a webpage
   height: auto;
   overflow: hidden;
}

#imagesDIV img {
  display: inline;
  margin: 0 20px;  // 0px on top and 20px on the sides
}

Upvotes: 1

Related Questions