Evenly spaced fixed-width columns - in a responsive setting - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Evenly spaced fixed-width columns - in a responsive setting

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
ol {<!--from   w w  w  . j a  v  a 2s  .  c o m-->
   border:2px dotted Chartreuse;
   text-align:justify;
   font-size:0;
   min-width:511px;
}

li {
   display:inline;
}

ol:after {
   content:"";
   display:inline-block;
   position:relative;
   width:100%;
   height:0;
}

div {
   display:inline-block;
   width:100px;
   height:251px;
}

body {
   padding:21px 0;
}

div {
   background:yellow;
   border:2px solid blue;
   border-radius:9px;
   box-shadow:2px 2px 4px pink;
}
</style> 
 </head> 
 <body> 
  <ol> 
   <li> 
    <div></div> </li> 
   <li> 
    <div></div> </li> 
   <li> 
    <div></div> </li> 
   <li> 
    <div></div> </li> 
   <li> 
    <div></div> </li> 
   <li class="force-justify"></li> 
  </ol>  
 </body>
</html>

Related Tutorials