Question

I have many divs on page like this:

How i can dipslay this images inline to fill with

this is my source

<div id="ranks_content">
    <img src="/Ranks/GetRankImage/1" alt="Recruit" class="rank_picture"/>
    <img src="/Ranks/GetRankImage/2" alt="Apprentice " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/3" alt="Apprentice " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/4" alt="Private " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/5" alt="Private " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/6" alt="Copral " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/7" alt="Copral " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/8" alt="Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/9" alt="Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/10" alt="Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/11" alt="Gunnery Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/12" alt="Gunnery Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/13" alt="Gunnery Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/14" alt="Gunnery Sergeant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/15" alt="Lieutenant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/16" alt="Lieutenant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/17" alt="Lieutenant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/18" alt="Lieutenant " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/19" alt="Captain " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/20" alt="Captain " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/21" alt="Captain " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/22" alt="Captain " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/23" alt="Major " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/24" alt="Major " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/25" alt="Major " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/26" alt="Major " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/27" alt="Commander " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/28" alt="Commander " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/29" alt="Commander " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/30" alt="Commander " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/31" alt="Colonel " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/32" alt="Colonel " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/33" alt="Colonel " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/34" alt="Colonel " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/35" alt="Brigadier " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/36" alt="Brigadier " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/37" alt="Brigadier " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/38" alt="Brigadier " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/39" alt="General " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/40" alt="General " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/41" alt="General " class="rank_picture"/>
    <img src="/Ranks/GetRankImage/42" alt="General " class="rank_picture"/>
</div>

Edit: Im using CSS3 and this is example how i want to display this images

Answer 1

Looking to your second image, I’ve made a Fiddle Example to better illustrate how to achieve your end goal:

See the Fiddle Example!

HTML STRUCTURE

<div id="ranks_content" class="clearfix">
  ...
  <div>
    <span>Commander</span>
    <img alt="" src="path_to_image.png" width="64" height="64">
    <span>5.0</span>
  </div>
  ...
</div>

CSS TO MAKE IT HAPPEN

/* not needed, used just for the demo */
body {
  background-color: #F2F2F2;
}
#ranks_content {
  margin: 0 auto;background-color: #FFF;
}

/* the necessary HTML starts here */
#ranks_content > div {
    padding: 6px;
    text-align: center;
    float: left;
}
#ranks_content > div > span {
    display: block;
    font-size: 11px;
}
#ranks_content > div > img {
    margin: 0 auto;
}

/* helpers */
.clearfix:before,
.clearfix:after  {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

Notes:

Since you are requesting some help about how to positioning the images, but your second image shows that you are going to use some text, the best approach would be to wrap every image and related text inside a div. Floating the div to the left will allow the images to stay side-by-side.