3 Columns Html Code Example


Example 1: html list over three columns

ul {     -webkit-column-count: 3;     -moz-column-count: 3;     column-count: 3; }

Example 2: how to make three column in a row in html

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {   box-sizing: border-box; }  /* Create three equal columns that floats next to each other */ .column {   float: left;   width: 33.33%;   padding: 10px;   height: 300px; /* Should be removed. Only for demonstration */ }  /* Clear floats after the columns */ .row:after {   content: "";   display: table;   clear: both; } </style> </head> <body>  <h2>Three Equal Columns</h2>  <div class="row">   <div class="column" style="background-color:#aaa;">     <h2>Column 1</h2>     <p>Some text..</p>   </div>   <div class="column" style="background-color:#bbb;">     <h2>Column 2</h2>     <p>Some text..</p>   </div>   <div class="column" style="background-color:#ccc;">     <h2>Column 3</h2>     <p>Some text..</p>   </div> </div>  </body> </html>

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable