CSS 4 Kolom Div Responsive – Simple dan Cepat

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Sutiono S.Kom., M.Kom ., M.T.I June 18, 2020

Terkadang kita tidak ingin menggunakan tabel dalam membentuk kolom karena hanya membutuhkan 1 row saja.

Div adalah pilihan tepat untuk menghandle request tersebut. Berikut adalah div untuk menampilkan 4 kolom secara responsive

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.dosenitkolom {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.dosenitrow:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Four Equal Columns</h2>

<div class="dosenitrow">
  <div class="dosenitkolom" style="background-color:#aaa;">
    <h2>Kolom 1</h2>
    <p>Paragraf atau text Javascript di sini</p>
  </div>
  <div class="dosenitkolom" style="background-color:#bbb;">
    <h2>Kolom 2</h2>
    <p>Paragraf atau text html di sini.</p>
  </div>
  <div class="dosenitkolom" style="background-color:#ccc;">
    <h2>Kolom 3</h2>
    <p>Paragraf atau text javascript di sini</p>
  </div>
  <div class="dosenitkolom" style="background-color:#ddd;">
    <h2>Kolom 4</h2>
    <p>Paragraf atau text css di sini.</p>
  </div>
</div>

</body>
</html>

tutorial website

Sutiono S.Kom., M.Kom ., M.T.I

Hi, i'm lecturer, technopreneur, investor, businessman, of course an IT Maniac. Have more than 12 years experience in as professional, and 10 years as technopreneur.