元素右对齐失效且元素间距异常问题求助

问题原因 #

• 浮动元素脱离正常文档流，.theirmsg未设置浮动和宽度，会环绕浮动的.mymsg，导致两者紧贴；<br>标签无法清除浮动，因此不起作用。
• 使用position: absolute时，元素完全脱离文档流，既不占据空间，也无法和其他元素保持合理间距，还容易出现位置偏移。

解决方案 #

方案1：修复浮动布局（兼容旧浏览器） #

给两个消息div都设置浮动，并通过calc()计算宽度避免溢出，同时添加清除浮动的容器确保下方元素正常布局：

.theirmsg {
  text-align: left;
  margin: 5px;
  padding: 5px;
  border: 1px solid black;
  background-color: #8a8;
  width: calc(50% - 20px); /* 减去左右margin+padding的总宽度 */
  float: left;
}
.mymsg {
  margin: 5px;
  padding: 5px;
  border: 1px solid black;
  background-color: #88a;
  width: calc(50% - 20px);
  float: right; 
  text-align: left;
}
/* 清除浮动的通用类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

修改后的HTML结构：

<div class="clearfix">
  <div class="mymsg">hello world1</div>
  <div class="theirmsg">hello world2</div>
</div>
<!-- 下方元素会自动排在两个消息div的下面 -->
<div class="bottom-element">我是位于下方的元素</div>

方案2：使用Flexbox布局（推荐，现代浏览器友好） #

Flexbox无需处理浮动，布局更简洁稳定：

/* 容器设置为flex布局，两端对齐 */
.msg-wrapper {
  display: flex;
  justify-content: space-between;
  margin: 0 5px;
}
.theirmsg {
  text-align: left;
  margin: 5px 0;
  padding: 5px;
  border: 1px solid black;
  background-color: #8a8;
  width: calc(50% - 10px); /* 减去左右margin */
}
.mymsg {
  margin: 5px 0;
  padding: 5px;
  border: 1px solid black;
  background-color: #88a;
  width: calc(50% - 10px);
  text-align: left;
}
.bottom-element {
  margin: 5px;
  padding: 5px;
  border: 1px solid black;
}

修改后的HTML结构：

<div class="msg-wrapper">
  <div class="theirmsg">hello world2</div>
  <div class="mymsg">hello world1</div>
</div>
<div class="bottom-element">我是位于下方的元素</div>

内容的提问来源于stack exchange，提问作者Борисюк Іван