span an image over multiple columns in a CSS3 site layout - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:3 Column

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

Description

span an image over multiple columns in a CSS3 site layout

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Johan Stenehall</title> 
  <style>

body {<!-- w ww  .jav  a2  s.c om-->
   font-size: 16px;
   line-height: 1.4;
   color: #333;
   padding: 1em;
}
article {
   max-width: 860px;
   -webkit-column-count: 4;
   column-count: 4;
   -webkit-column-gap: 20px;
   column-gap: 20px;
}
article img {
   display: block;
   -webkit-column-span: all;
   column-span: all;
   height: 200px;
   width: calc(75% - 10px);
   margin-bottom: 25px;
   margin-left: calc(25% + 10px);
}
article p {
   margin-bottom: 1.3em;
}
article p:first-of-type {
   margin-top: -225px;
}
@media screen and (max-width: 800px) {
   article {
      -webkit-column-count: 2;
      column-count: 2;
   }
   article p:first-of-type {
      margin-top: 0;
   }
   article img {
      margin: 0 0 30px;
      width: 100%;
      height: auto;
   }
}
@media screen and (max-width: 600px) {
   article {
      -webkit-column-count: 1;
      column-count: 1;
   }
}


      </style> 
 </head> 
 <body translate="no"> 
  <article> 
   <img src="https://www.java2s.com/style/demo/Safari.png"> 
   <p>this is a test. this is a test. this is a test. this is a test. this is a test. 
   this is a test. this is a test. this is a test. this is a test. this is a test. 
   this is a test. this is a test. this is a test. this is a test. this is a test. 
   this is a test. this is a test. this is a test. this is a test. this is a test. 
   this is a test. this is a test. this is a test. this is a test. this is a test. 
   this is a test. </p> 
  </article>  
 </body>
</html>

Related Tutorials