Inline-blok Pada CSS
Inline-blok adalah cara untuk membuat suatu kumpulan element yang sama menjadi blok baris yang membuat tampilan lebih mudah. Inline-blok merupakan value dari properti display dan penggunaan inline-blok merupakan cara baru untuk mengganti cara lama yaitu float + clear.
contoh versi lama
<!DOCTYPE html>
<html>
<head>
<title>inline blok</title>
<style>
.floating-box{
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid yellow;
}
.after-box{
clear: left;
border: 3px solid red;
}
</style>
</head>
<body>
<h2>cara lama menggunakan float</h1>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="after-box">box lainya setelah floating box</div>
</body>
</html>
dan ini adalah menggunakan inline-blok
<!DOCTYPE html>
<html>
<head>
<title>inline blok</title>
<style>
.floating-box{
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid yellow;
}
.after-box{
border: 3px solid red;
}
</style>
</head>
<body>
<h2>cara lama menggunakan float</h1>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="after-box">box lainya setelah floating box</div>
</body>
</html>
Semoga bermanfaat, sampai jumpa dipostingan selanjutnya.
Written by @akhi_syabab
Programmer python yang punya banyak ambisi.
Remote developer at remoteworker.id Software Agency