Cara Menyamakan Tinggi Columns Pada HTML CSS

Pada artikel ini saya akan mengulas seputar columns dalam tampilan website. Dalam kasus sekarang saya akan membuat beberapa kolom yang nanti akan dibuat tinggi sama rata. Tentu sebagai seorang pengembang website harus banyak cara dalam membuat atau mendesign tampilannya.

Baiklah sebagai berikut struktur HTMLnya :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Menyamakan Tinggi Columns Pada HTML CSS</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="boxes">
			<div class="box">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, quidem, sint. Odit autem voluptatum perspiciatis iste nesciunt pariatur, sint quas officiis placeat natus doloribus expedita nostrum nihil assumenda eaque nam vitae soluta cum fugit consequuntur reiciendis consequatur sed quisquam eligendi error. Aspernatur accusantium reiciendis aperiam magni fuga, facere quisquam odit.</p>
			</div>
		
			<div class="box">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas saepe fugiat officiis, voluptatum, a qui fuga et eligendi, odit earum .Aspernatur accusantium reiciendis aperiam.</p>
			</div>
		
			<div class="box">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae et, in quod, facilis possimus magni ex non, distinctio quis necessitatibus sunt dolores. Earum neque, quos omnis commodi corporis quidem numquam. Consequatur voluptatem illo assumenda doloribus iure, ut ipsa ex ipsum!</p>
			</div>
		
			<div class="box">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci hic tempore eos deleniti totam iusto officiis, quisquam, vero et earum.</p>
			</div>
		</div>
	</div>
</body>
</html>

Selanjutnya menambahkan style dari CSS seperti ini codenya:

@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');
*{margin:0;padding:0;}
body{font-family: 'Rubik';}
.container{width: 900px;margin: auto;line-height: 30px;text-align: justify;}
.container > div{margin:0 0 25px 0;min-height: 100px;width: 100%}
.boxes{display: table}
.boxes .box{display: table-cell;width: 25%;padding: 10px;}
.boxes .box:nth-child(odd){background: #EAEAAA}
.boxes .box:nth-child(even){background: #1ABC9C}

Apabila sudah simpan file HTML dan CSS, kemudian buka pada browser sehingga seperti berikut tampilannya:

Cara-Menyamakan Tinggi Columns Pada HTML CSS-edi-280220

Nah demikian yang bisa saya sampaikan dalam pembahasan kali ini, semoga bermanfaat dan sampai jumpa dengan artikel lainnya.

terima kasih

The post Cara Menyamakan Tinggi Columns Pada HTML CSS appeared first on Kursus Website Terbaik.