Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
membuat layout berjajar
cara membuat 3 layour berjajar bagaimana yaa ,,?? saya gunakan properti
float:left;
tapi tulisan dibawahnya jadi berantakan letaknya seperti ini
ini script htmlnya
<div class"pp-embed">[pano file="http://localhost/3dri/wp-content/uploads/PANO_1/index.html" preview="http://localhost/3dri/wp-content/uploads/PANO_1/THUMB.jpg" width="400" height="400"]</div>
<h3> text di bawahnya</h3>
<div class"pp-embed">[pano file="http://localhost/3dri/wp-content/uploads/PANO_1/index.html" preview="http://localhost/3dri/wp-content/uploads/PANO_1/THUMB.jpg" width="400" height="400"]</div>
<h3> text di bawahnya</h3>
<div class"pp-embed">[pano file="http://localhost/3dri/wp-content/uploads/PANO_1/index.html" preview="http://localhost/3dri/wp-content/uploads/PANO_1/THUMB.jpg" width="400" height="400"]</div>
<h3> text di bawahnya</h3>
<div class"pp-embed">[pano file="http://localhost/3dri/wp-content/uploads/PANO_1/index.html" preview="http://localhost/3dri/wp-content/uploads/PANO_1/THUMB.jpg" width="400" height="400"]</div>
<h3> text di bawahnya</h3>
ini css yang saya pakai
.pp-embed{
margin:2px;
float:left;
}
0
4 Jawaban:
coba kasih ini gan
.pp-embed{
margin:2px;
float:left;
box-sizing:border-box;
}
0
@ahmadhanaf trimakasih gan,, tetep tidak bisa rapih ehehehe
0
Cobain nih.
<style>
* {
box-sizing: border-box;
/*ini penting gan cari digoogle fungsinya apa*/
}
/*butuh container untuk membungkus pp-embed biar rapi*/
.container {
width: 1000px;
padding: 15px;
margin: auto;
}
.container::before {
content: " ";
display: table;
}
.container::after {
content: " ";
display: table;
clear: both;
}
.pp-embed {
display: block;
float: left;
padding: 0 15px;
}
</style>
<div class="container">
<div class="pp-embed">[pano file="http://localhost/3dri/wp-content/uploads/PANO_1/index.html" preview="http://localhost/3dri/wp-content/uploads/PANO_1/THUMB.jpg" width="400" height="400"]</div>
<h3> text di bawahnya</h3>
<div class="pp-embed">[pano file="http://localhost/3dri/wp-content/uploads/PANO_1/index.html" preview="http://localhost/3dri/wp-content/uploads/PANO_1/THUMB.jpg" width="400" height="400"]</div>
<h3> text di bawahnya</h3>
<div class="pp-embed">[pano file="http://localhost/3dri/wp-content/uploads/PANO_1/index.html" preview="http://localhost/3dri/wp-content/uploads/PANO_1/THUMB.jpg" width="400" height="400"]</div>
<h3> text di bawahnya</h3>
<div class="pp-embed">[pano file="http://localhost/3dri/wp-content/uploads/PANO_1/index.html" preview="http://localhost/3dri/wp-content/uploads/PANO_1/THUMB.jpg" width="400" height="400"]</div>
<h3> text di bawahnya</h3>
</div>
0
coba tambahkan "display:inline-block" di bagian css
.pp-embed{
margin:2px;
float:left;
display:inline-block;
}
0