bikin gambar postingan sejajar dengan css


gambar sejajar sebelah kiri, opic blog
gambar sejajar kanan, opic blog

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

5 komentar

  1. Saya lihat ada padding dengan nilai negative mas, kalau ga salah untuk padding tidak bisa diberi nilai negative, itu akan error CSS3. Maaf kalau saya salah :)

    BalasHapus
    Balasan
    1. terima kasih banget atas koreksinya mas ardhi...
      maksud hati berkreasi dahulu... eh ga tau nya error, nanti akan di bikin fix
      sekali lagi terima kasih mas

      Hapus
    2. Sama-sama mas :) kita saling bertukar pikiran :)

      Hapus
  2. trik sederhana yang cukup bermanfaat sob

    BalasHapus
    Balasan
    1. iya mba... sederhana itu indah.
      yang rumit rumit mah bukan urusan saya. he he he...
      trims kunjungnnya.

      Hapus

Terima kasih atas kunjungan nya dan Gunakan tag seperlunya

Tag kode pendek <i rel="code">KODE ANDA</i>
Tag kode panjang <i rel="pre">KODE PANJANG ANDA</i>
Tag gambar <i rel="image">URL GAMBAR</i>
Tag judul <b rel="h3">JUDUL ANDA DI SINI...</b>
Tag huruf tebal <b>TEKS ANDA DI SINI...</b>
Tag huruf miring <i>TEKS ANDA DI SINI...</i>

Konversi Code