3 Column layout with an image inside each one - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:3 Column

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

Description

3 Column layout with an image inside each one

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style class="cp-pen-styles">
.container {<!--from   w ww .ja  v  a 2  s.  c  om-->
   display: flex;
}
.item {
   flex:1;
   text-align: center;
   border: 1px solid red;
   margin: 5px;
}
img {
   width: 128px;
}

      </style> 
   </head> 
   <body> 
      <div class="container"> 
         <div class="item"> 
            <img src="http://java2s.com/resources/e.png" alt="alt message"> 
            <p>Text Text Text Text Text Text</p> 
         </div> 
         <div class="item"> 
            <img src="http://java2s.com/resources/e.png" alt="alt message"> 
            <p>Text Text Text Text Text Text</p> 
         </div> 
         <div class="item"> 
            <img src="http://java2s.com/resources/j.png" alt="alt message"> 
            <p>Text Text Text Text Text Text</p> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials