在配置文件下面的文本，而不是在下面列有用户名。

Question

我有一个消息div，配置文件图标在左边和右边，用户名，就在它下面的消息。如果消息太长，则如下所示：

​

​

但是我想要的是它应该在用户名下面对齐。

我的信息显示框代码：

<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>

我的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

您可以使用挠曲箱轻松地对齐内容。我添加了一个工作代码片段。

1. 将display: flex添加到您的#chat_box id以对齐图像和它的内容相邻。
2. 删除content_2类，并将内容的注释部分添加到原始content类中。所以现在您的#chat_box只包含两个元素，一个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

删除<br /> + <div class="content">，如下所示。由于您有一个<p>，所以在下一行中不需要一个<br/>

<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;
  }

Answer 3

在相同的框中添加配置文件名称和描述文本，尝试如下：

<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其余部分将与您使用的相同，上面只有放置的内容是错误的。