Membagi Artikel

by Arlina Fitriyani

HTML

<body>  
  <div class='post-body'>
    <h2 class='post-title'>2 Kolom Postingan</h2>        
<div class='bagidua'>Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis. Maecenas iaculisntesque ante, velfaucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.    
Donec at dolor ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis.   
Maecenas iaculisntesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>

    <h2 class='post-title'>3 Kolom Postingan</h2>        
<div class='bagitiga'>Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis. Maecenas iaculisntesque ante, velfaucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.    
Donec at dolor ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis.   
Maecenas iaculisntesque ante, vel...

CSS

body {
    background-color:#f9f9f9;
    font-size:16px
    color:#444;
}
.post-body h2{
    color:#e25633;
    text-align:center;
}
.post-body {
    max-width:680px;
    margin:20px auto;
    border:10px solid #f0f0f0;
    padding:15px 20px;
    background-color:#fff;
    color:#444;
}
.bagidua
{
   -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}
.bagitiga
{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}
.bagitigawarna
{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px; 
    column-gap: 40px;
    -webkit-column-rule: 4px outset #ff00ff;
    -moz-column-rule: 4px outset #ff00ff;
    column-rule: 4px outset #ff00ff;
}
div {
display:block;
}