如何实现两个div横向并排？附HTML/CSS代码求助

阿华AIGC实验室

2026-5-15

解决消息框横向并排的问题

嘿，我来帮你搞定这个聊天框并排的问题！你现在的问题是因为<div>是块级元素，默认会独占一行，所以.massege和.massege2会上下堆叠。用Flexbox布局就能轻松解决这个问题，这也是现在做响应式布局最常用的方法。

修改后的完整代码

HTML部分

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

CSS部分

.conversation {
  display: flex;
  justify-content: space-between;
  padding: 0 80px; /* 给左右留空间放头像 */
  align-items: flex-start; /* 让消息框顶部对齐 */
}

.massege {
  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;
  position: relative; /* 让内部绝对定位元素相对自己 */
  padding: 10px; /* 加内边距让内容不贴边 */
}

.photo {
  height: 70px;
  width: 70px;
  border: 1px solid white;
  border-radius: 90px;
  position: absolute;
  top: 20px;
  left: -80px; /* 头像移到消息框左侧外面 */
}

.massege2 {
  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;
  position: relative; /* 让内部绝对定位元素相对自己 */
  padding: 10px; /* 加内边距让内容不贴边 */
}

.photo2 {
  height: 70px;
  width: 70px;
  border: 1px solid white;
  border-radius: 90px;
  position: absolute;
  top: 20px;
  right: -80px; /* 头像移到消息框右侧外面 */
}

关键修改点说明

Flex布局父容器：给.conversation添加display: flex后，子元素会自动横向排列；justify-content: space-between让两个消息框分别靠左右两侧，中间自动留白；align-items: flex-start保证两个消息框顶部对齐。
相对定位消息框：给.massege和.massege2加position: relative，这样里面的头像（绝对定位）会相对于消息框本身定位，不会跑到页面的奇怪位置。
调整头像位置：把原来基于页面的right属性改成相对于消息框的left/-right，让头像刚好在消息框的外侧，符合聊天界面的常见布局。
优化内容间距：给消息框加了padding，让内部文本不会紧贴边框，看起来更美观。