bikin gambar postingan sejajar dengan css

28 Des 2014

Bikin gambar sejajar pada postingan dengan mengunakan css

.col-group {
  overflow:hidden;
  display:block;
}
.left-col {
  width:50%;
  float:left;
  padding:10px 0 5px 0;
  position:relative;
}
.right-col {
  width:50%;
  float:right;
  padding:10px 0 5px 0;
  position:relative;
}
.left-col:before,
.right-col:before {
  font-family:inherit;
  display:block;
  position:absolute;
  top:0;
  left:20px;
  font-size:22px;
  line-height:1;
  color:#fff;
  background:#FF6600;
  width:24px;
  height:24px;
  text-align:center;
  padding-top:15px;
  box-shadow:0 8px 5px -2px rgba(0,0,0,.2);
  border:1px solid #CC5200;
  border-top-width:0;
}
.left-col:before {
  content:"1";
}
.right-col:before {
  content:"2";
}

<div class="col-group">
   <div class="left-col"> konten 1 </div>
   <div class="right-col"> konten 2</div>
</div>

Hasilpun lumayan bagus setelah di kasih sentuhan penomoran urut, kode di atas sudah responsif dan masih bisa di kreasikan lagi, soal loading masih tetap oke / cepat

css - variasi

Taufik 19.03