текст идет ниже профиля, а не выровнен с именем пользователя

Question

Итак, вот что происходит, у меня есть сообщение div со значком профиля слева и справа от имени пользователя и чуть ниже сообщения. если сообщение слишком длинное, оно выглядит следующим образом

, но я хочу, чтобы оно было выровнено ниже имени пользователя ...

my код окна сообщения:

                    <div id="show_msg">
                        <div id="chat_box">
                          <img src="images/user.jpg" id="onio_user_2"  style="border: 2px solid lightblue">
                            <div class="content-2">
                                <p style="font-weight: bold;font-size:13px;">BaTuTa</p>
                            </div>
                            <br />
                            <div class="content">
                                <p><span>Han yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahiBhajsahiBhajsahiBhajsahiBhajsahiBhajsahiBhaj bhaj wadna ay mandir maseeti
Te kaday mann apnay wich warya ee naai</span></p>
                            </div>                          
                        </div>
                    </div>

my css:

#chat_box {
    width: 100%;
    border: 1px dotted black;
    position: absolute;
}
#chat_box img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    float: left;
}
.content {
    font-size: 12px;
    float: left;
    margin: 0 0 0 3px;
}
.content p {
    margin: 0 0 1px 0;
    padding: 0;

}
.content-2 {
    font-size: 12px;
    float: left;
    margin: 0 0 0 3px;
}
.content-2 p {
    margin: 0 0 1px 0;
    padding: 0;
    word-break: break-all;

}

Answer 1

Вы можете использовать flexbox для простого выравнивания контента. Я добавил рабочий фрагмент кода.

1. Добавьте display: flex к своему идентификатору #chat_box, чтобы выровнять изображение и его содержимое рядом друг с другом.

2. Удалите класс content_2 и добавьте комментарий часть вашего контента для вашего исходного content класса. Так что теперь ваш #chat_box содержит только 2 элемента, img и div с вашим текстом. Так проще выровнять его правильно.

3. Добавьте свойство min-width и min-height к вашему img, чтобы оно не сжималось.

#chat_box {
  width: 100%;
  border: 1px dotted black;
  position: absolute;
  
  display: flex;
}

#chat_box img {
  min-width: 40px;
  min-height: 40px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
}

.content {
  font-size: 12px;
  float: left;
  margin: 0 0 0 3px;
}

.content p {
  margin: 0 0 1px 0;
  padding: 0;
}

.comment {
  font-size: 12px;
  margin: 0 0 1px 0;
  padding: 0;
  word-break: break-all;
}

<div id="show_msg">
  <div id="chat_box">
    <img src="images/user.jpg" id="onio_user_2" style="border: 2px solid lightblue">
    <div class="content-2">
      <p style="font-weight: bold;font-size:13px;">BaTuTa</p>
      <p class="comment"><span>Han yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahiBhajsahiBhajsahiBhajsahiBhajsahiBhajsahiBhaj bhaj wadna ay mandir maseeti
Te kaday mann apnay wich warya ee naai</span></p>
    </div>
  </div>
</div>

Answer 2

Добавьте имя профиля с текстом описания в том же окне, попробуйте это:

<div id="show_msg"><div id="chat_box"><img src="images/user.jpg" id="onio_user_2" style="border: 2px solid lightblue"><div class="content-2"><p style="font-weight: bold;font-size:13px;">BaTuTa</p><p class="comment">lorem ipsum is a dummy text which goes here</p></div></div></div>

Css должно быть ссылкой

#chat_box img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 100%;
  float: left;}

  .content {
  font-size: 12px;
  float: left;
  max-width: 90%;
  margin: 0 0 0 3px;} 

Вы также можете изменить максимальную ширину на ширину, если вы столкнуться с любой проблемой, он будет работать идеально, остальные css будут такими же, как вы использовали выше, только размещение контента является неправильным.

Answer 3

Удалить <br /> + <div class="content">, как показано ниже. Поскольку у вас есть <p>, вам не нужно <br/> до go в следующей строке

<div id="show_msg">
                  <div id="chat_box">
                    <img src="images/user.jpg" id="onio_user_2"  style="border: 2px solid lightblue">
                      <div class="content-2">
                          <p style="font-weight: bold;font-size:13px;">BaTuTa</p>

                          <p><span>Han yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahi kaha ap nayHan yaar sahiBhajsahiBhajsahiBhajsahiBhajsahiBhajsahiBhaj bhaj wadna ay mandir maseeti
    Te kaday mann apnay wich warya ee naai</span></p>
                      </div>
                  </div>
              </div>

css

  #chat_box {
      width: 100%;
      border: 1px dotted black;
      position: absolute;
  }
  #chat_box img {
      width: 40px;
      height: 40px;
      border-radius: 100%;
      float: left;
  }
  .content {
      font-size: 12px;
      float: left;
      margin: 0 0 0 3px;
  }
  .content p {
      margin: 0 0 1px 0;
      padding: 0;
  }
  .content-2 {
      font-size: 12px;

      margin: 0 0 0 3px;
  }
  .content-2 p {
      margin: 0 0 1px 0;
      padding: 0;
      word-break: break-all;
  }