Ini adalah kode CSS saya. Ada dua div dan dua img sehingga satu pesan div ada di sisi kiri dan pesan div 2 ada di sisi kanan. Tetapi di bagian bawah saya menginginkannya di sisi kiri di samping pesan div.

Terima kasih!

Kode HTML saya yang saya gunakan dan ini adalah Cuplikan dari apa yang saya coba sampai sekarang:

 .photo{
         height: 70px;
        width: 70px;
        border: 1px solid white;
        border-radius: 90px;
        position: absolute;
        margin-top: 20px;
        right: 55%;
    }
    .massege2{
         background-color: whitesmoke;
        width: 200px;
        overflow-wrap: break-word;
        border: 1px solid red;
        border-radius: 20px;
        margin-left: 65%;
        min-height: 11%;
        margin-top: 30px;
        font-family: 'Berkshire Swash', cursive;
    }
    .photo2{
        height: 70px;
        width: 70px;
        border: 1px solid white;
        border-radius: 90px;
        position: absolute;
        margin-top: 20px;
        right: 1px;
    }
    .massege{
        background-color: whitesmoke;
        width: 200px;
        overflow-wrap: break-word;
        border: 1px solid red;
        border-radius: 20px;
        margin-left: 10%;
        min-height: 11%;
        margin-top: 30px;
        font-family: 'Berkshire Swash', cursive;
    }
<div class="conversation">
  <div class='massege'>
       <img src='../images/photo.png' class='photo'>
       <p class='date'>2018-Jan-Sun -- 06-18-58</p>
       <hr style='border: 1px solid black'>
       <p>hi</p>
   </div>
   <div class='massege2'>
       <img src='../images/photo.png' class='photo2'>
       <p class='date'>2018-Jan-Sun -- 06-18-58</p>
       <hr style='border: 1px solid black'>
       <p>hi</p>
   </div>
 </div>
       
       
0
Ahmed Shady 15 Januari 2018, 15:03

1 menjawab

Jawaban Terbaik

Div Anda berada di baris terpisah karena memiliki display: block secara default. Anda dapat mengatur properti tampilan mereka ke inline-block untuk menyelesaikan masalah Anda. Saya menulis ulang kode Anda dengan cara yang lebih rasional. Tidak perlu membuat kelas baru untuk setiap elemen pesan atau elemen foto seperti yang Anda lakukan. Ini membawa Anda ke pengulangan kode. Anda dapat melakukannya dengan satu kelas umum. HTML:

<div class="conversation">
    <div class='message'>
        <img src='../images/photo.png' class='message-photo'>
        <p class='date'>2018-Jan-Sun -- 06-18-58</p>
        <hr style='border: 1px solid black'>
        <p>hi</p>
    </div>
    <div class='message'>
        <img src='../images/photo.png' class='message-photo'>
        <p class='date'>2018-Jan-Sun -- 06-18-58</p>
        <hr style='border: 1px solid black'>
        <p>hi</p>
    </div>
</div>

CSS

.message{
    /* position: relative lets us position .message-photo elements relative to the .message elements */
    position: relative;
    /* display: inline-block lets us keep the divs on the same line */
    display: inline-block;
    background-color: whitesmoke;
    width: 200px;
    overflow-wrap: break-word;
    border: 1px solid red;
    border-radius: 20px;
    min-height: 11%;
    margin-top: 30px;
    font-family: 'Berkshire Swash', cursive;
    display: inline-block;
}

.message-photo{
    height: 70px;
    width: 70px;
    border: 1px solid white;
    border-radius: 90px;
    position: absolute;
    margin-top: 20px;
    right: 1px;
}
0
Max 15 Januari 2018, 12:56