Saya mencoba membuat spanduk vertikal di kedua sisi beberapa teks menggunakan beberapa gambar. Saat ini saya menggunakan padding untuk menjaga teks tetap pada tempatnya tetapi saya ingin padding diabaikan untuk penempatan gambar tetapi bukan teks.

Saat ini gambar merupakan bagian dari teks atau mendorong teks lebih jauh ke arah yang salah.

.body{
  padding-left: 20%;
  padding-right: 20%;
  font-size: 20px;
  list-style-type: none;
  color: #231427;
}
.body > .images{
  padding-left: -20%;
  padding-right: -20%;
  font-size: 20px;
  list-style-type: none;
  color: #231427;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta consectetur nisl, sed porta enim ullamcorper eu. Ut id vulputate sem, ac fringilla ligula.</p>
<br>
<div class="images">
  <img src="img/IMG_3502.JPG" alt="W. Jons Property" width="170px">
</div>
1
trezremay 11 April 2020, 13:54

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan flex untuk kebutuhan Anda.

.body {
  padding-left: 20%;
  padding-right: 20%;
  font-size: 20px;
  list-style-type: none;
  color: #231427;
}

#MainDiv {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}

.images {
  margin: 10px;
  font-size: 20px;
  list-style-type: none;
  color: #231427;
}
<div id="MainDiv">
  <div class="row">
    <div class="images">
      <img src="http://placekitten.com/301/301" alt="W. Jons Property" width="100px">
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta consectetur nisl, sed porta enim ullamcorper eu. Ut id vulputate sem, ac fringilla ligula.</p>
    <br>
  </div>

  <div class="row">
    <div class="images">
      <img src="http://placekitten.com/301/301" alt="W. Jons Property" width="100px">
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta consectetur nisl, sed porta enim ullamcorper eu. Ut id vulputate sem, ac fringilla ligula.</p>
    <br>
  </div>



</div>
1
Manjuboyz 11 April 2020, 12:14