CARA MEMBUAT DUA KOLOM SEJAJAR DENGAN CSS | editblogtema editblogtema: CARA MEMBUAT DUA KOLOM SEJAJAR DENGAN CSS

Logtema

×
tutorial dan teknik

CARA MEMBUAT DUA KOLOM SEJAJAR DENGAN CSS

Bisakah membuat dua kolom yang dapat diisi dengan konten pada blog? Kolom yang mirip dengan aplikasi MS.word pada MS.Office. Tentu saja bisa cara pembuatannya juga tidak sulit, tujuan dari artikel ini tidak lain adalah untuk berlatih kode CSS pada halaman web.
membuat dua kolom sejajar dengan kode css
Gambar kode css berikut hasil pembuatan dua kolomnya.
Gambar diatas adalah tangkapan layar demo halaman w3school tempat kami mencobakan trik ini. Dengan kode css kita dapat memanipulasi tampilan halaman kita yang berisi konten menjadi bentuk dan fungsi yang kita kehendaki. Contoh sederhana ini juga berguna sebagai alat melatih pemahaman kita terhadap css apalagi sebagai pemula.

Jangan lupa klik  Run terlebih dahulu agar kolom sebelah kanan menampilkan demo daripada hasilnya. Melalui alat w3school sobat bisa mengedit kode kode yang sudah ada dan menyesuaikannya dengan kebutuhan desain sobat sendiri.
Untuk lebih jelasnya lihat DEMO

Adapun kode css yang saya buat adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 500px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Dua kolom berdampingan</h2>

<div class="row">
  <div class="column" style="background-color:#F0F8FF;">
    <h2>Singularity 1</h2>
    <p>Kebanyakan manusia memandang kematian sebagai takdir yang tidak dapat dimungkiri, tidak dapat diatasi dan tidak dapat dihindari. Tetapi para ilmuwan, dan orang orang yang menguasai teknologi mempertanyakannya. Bagaimana jika kematian itu hanyalah sebuah peristiwa yang sesungguhnya dapat kita atasi? Mengapa kita tidak menggunakan segala sumberdaya untuk mengatasinya?..</p>
  </div>
  <div class="column" style="background-color:#FFF0F5;">
    <h2>Singularity 2</h2>
    <p>Kebanyakan manusia memandang kematian sebagai takdir yang tidak dapat dimungkiri, tidak dapat diatasi dan tidak dapat dihindari. Tetapi para ilmuwan, dan orang orang yang menguasai teknologi mempertanyakannya. Bagaimana jika kematian itu hanyalah sebuah peristiwa yang sesungguhnya dapat kita atasi? Mengapa kita tidak menggunakan segala sumberdaya untuk mengatasinya?..</p>
  </div>
</div>

</body>
</html>

Sobat bisa menerapkan percobaannya dengan meletakan kode tersebut pada opsi "postinban baru" lalu pilih HTML. Save dan lihat hasilnya.

www.editblogtema.net

Bagikan (share):

No comments:

Post a Comment

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan