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;
}
avatar Aziez
@Aziez

193 Kontribusi 18 Poin

Diperbarui 6 tahun yang lalu

4 Jawaban:

coba kasih ini gan

.pp-embed{
margin:2px;
float:left;
box-sizing:border-box;
}

avatar ahanafi
@ahanafi

815 Kontribusi 552 Poin

Dipost 6 tahun yang lalu

@ahmadhanaf trimakasih gan,, tetep tidak bisa rapih ehehehe

avatar Aziez
@Aziez

193 Kontribusi 18 Poin

Dipost 6 tahun yang lalu

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>

avatar 54KT1
@54KT1

20 Kontribusi 7 Poin

Dipost 6 tahun yang lalu

coba tambahkan "display:inline-block" di bagian css

 .pp-embed{
margin:2px;
float:left;
display:inline-block;
}
avatar Nanang95
@Nanang95

4 Kontribusi 2 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban