Layout Horizontal

Syntax:

display:inline-block;

Keterangan:

Nilai inline-block pada property display digunakan untuk menempatkan elemen diposisi kanan elemen lainnya.

Syarat:

Lebarnya tidak melebihi tempat yang disediakan.

Contoh :

Buatlah sebuah file bernama layoutHorizontal.html dan masukkan kode berikut ini:

<head>

<style>

div{

   margin:0px;

   padding:0px;

   font-family: helvetica, arial, sans-serif;

    font-size: 12px;

    color: #555555;

}

 

#kotakBerita{

   width:300px;

}

h1{

   font-family: 'LatoLight';

   font-size: 33px;

    color: #f28900;margin: 0;

    padding: 10px 0;

    text-align: center;

    font-weight: normal

 

}

img{vertical-align: middle;margin-right:8px}

 

span{ 

   color: #336699;

   font-size: 15px;

    font-family: 'Lato';

    line-height: 1.33em;

   vertical-align:top;

   display:inline-block;

   width:203px;

}

.isi{ margin-bottom:30px}

 

</style>

</head>

<body>

<div id="kotakBerita">

<div>

<h1>WHAZZUP</h1>

</div>

<div class="isi">

<img src="201603201103zaskia.png" />

<span>

3 Lawyer Kondang Ini Siap Bela Kasus Panas Zaskia Gotik

</span>

</div>

<div class="isi">

<img src="201603201352sutikarno.png" />

<span>

Bikin Kaget, Suti Karno Sekarang Tomboy dan Bertato

</span>

</div>

<div >

<img src="201603201400Shaheer.png" />

<span>

Shaheer Sheikh: Aku dan Ayu Ting Ting Sudah PUTUS KOMUNIKASI

</span>

</div>

 

 

</div>

</body>

Keterangan:

Dalam selector span diatas terlihat display:inline-block yang digunakan agar tulisan dalam elemen ini diletakkan disebelah kanan elemen sebelumnya dan lebarnya 203px yang tidak melebihi tempat yang disediakan.

Hasil:

Klik 2x nama file HTML-mu maka pada browser akan menampilkan hasil seperti berikut ini:

WHAZZUP

3 Lawyer Kondang Ini Siap Bela Kasus Panas Zaskia Gotik
Bikin Kaget, Suti Karno Sekarang Tomboy dan Bertato
Shaheer Sheikh: Aku dan Ayu Ting Ting Sudah PUTUS KOMUNIKASI
2016 © Fahmi Basya Kartapura