How to show divs inline. css html


Tags: html,css

Problem :

I have many divs on page like this:

enter image description here

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

enter image description here



Solution :

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

enter image description here

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.


    CSS Howto..

    How to debug a website template which is very slow (client side)?

    How to center a relative div in my case?

    How can I reduce the amount of vertical space between lines of text using CSS?

    How to call particular CSS file only for desktop not for mobile [closed]

    How to assign a css class to echo $output

    How to make a descriptions list inline?

    How to make html lists horizontal in css?

    How to imitate the native iPhone look and feel in a web app developed with the ASP.NET platform?

    tinymce how to specify the css file to be used for tinymce in another js file

    How do I center elements on a page using percentage widths?

    CSS: How to get this overlay to extend 100% with scrolling?

    How should I override hover style of a div in an anchor tag?

    How do I set a block of text to drop to a new line all at once?

    jQuery: how to avoid transparent effect on a mask div

    How to magnify images on hover using purely css? [closed]

    How do I change CSS submenu width so it doesn't used the same width as the main menu?

    How to change the Color of dynamically created divs on click event, who are having same class?

    How to automatically scroll when div expands at bottom of page?

    HTML / CSS: How to make the content follow the footer?

    how to make css sub menu links longer than parent link

    My CSS looks perfect on desktop, but leaves a 2-5 pixel line to the right on mobile, how do I find the issue?

    how to solve IE6 box model problem without adding extra div and using Valid CSS?

    CSS, how to align a button vertically next to large images

    Getting the title of a picture overlayed onto the picture of a slideshow

    section to be trigger of show/hide content by click html/css only

    How to conditionally resize image if screen not wide enough, with CSS?

    how to align elements using css in angular typeahead

    How to remove table column with CSS

    Adding bootstrap tooltip modifies the style of the element itself - how do I stop this happening?

    CSS:How to properly remove border using CSS when border-radius is used?