如何让两个div并排显示，id为middle的居左、id为right的居右

问题分析 #

• 现有.divStyle设置了左右各252.5px的外边距，占用宽度过大，无法容纳两个并排元素
• 目前id="right"被绑定在button元素上，不符合「id为right的div在右侧」的需求
• 原生float布局容易出现高度塌陷、排版错位的问题，更推荐用flex布局实现并排效果

调整后的完整代码 #

CSS代码 #

/* 新增flex容器样式，用来包裹两个并排的div */
.flex-container {
  display: flex;
  /* 左右两个div之间留20px间距，可自行调整 */
  gap: 20px;
  /* 容器水平居中，代替原来.divStyle上的左右margin */
  margin: 5px 252.5px 0;
}

.divStyle {
  margin-top: 0;
  padding-right: 10px;
  padding-left: 10px;
  background-color: white;
  border: 2px solid #4CAF50;
  border-radius: 5px;
  /* 两个div各占一半宽度，也可以自行设置固定宽度 */
  flex: 1;
}

.center {
  text-align: center;
}

.hidden {
  display: none;
}

.button-arangementR {
  display: flex;
  height: 100px;
  justify-content: right;
  gap: 20px;
  /* 按钮容器宽度和外层flex容器对齐 */
  margin: 0 252.5px;
}

HTML代码 #

<!-- 新增外层flex容器包裹两个并排的div -->
<div class="flex-container">
  <!-- 左侧div id=middle 保持原有内容 -->
  <div class="divStyle" id="middle">
    <div>
      <h1 style="color: darkblue;">初始爬升</h1>
    </div>
    <div>
      <div>
        <h3>起点为(25,5)，爬升的峰值点为(75,105)。</h3>
      </div>
      <div>
        <br>
        <p>m = 纵轴变化量/横轴变化量</p>
        <br>
        <p>m = (5-105)/(25-75)</p>
        <br>
        <p>m = -100/-50 = 100/50</p>
        <br>
        <p>m = 2</p>
        <br>
      </div>
      <div>
        <h3>你可以将斜率简化为m = 2，由于x轴和y轴的增量相同，你可以直接计数单位。</h3>
      </div>
    </div>
  </div>
  <!-- 右侧div id=right 去掉hidden类正常显示 -->
  <div class="divStyle" id="right">
    <div>
      <h1 style="color: darkblue;">初始爬升方程</h1>
    </div>
    <div>
      <p>y = mx + b</p>
    </div>
    <div>
      <h2 style="color: red;">y = 2x - 45</h2>
    </div>
    <div>
      <p>这是斜截式方程，我需要计算初始爬升线与y轴截距的交点位置。</p>
    </div>
  </div>
</div>
<!-- 按钮容器放在flex容器下方 -->
<div class="button-arangementR">
  <button id="nextBtn">下一步</button>
</div>

调整说明 #

• 新增外层.flex-container容器，用flex布局实现两个div自动并排，不需要手动写float，兼容性好也不容易出排版问题
• 把原来.divStyle上的左右外边距移到外层容器上，避免两个div各自加外边距导致宽度溢出
• 给两个div设置了flex:1，会自动平分容器宽度，也可以根据需求给单个div设置固定宽度
• 把原来绑定在button上的id="right"移到了右侧div上，符合需求，按钮id修改为语义化的nextBtn避免id重复

如果一定要用float布局实现，只需要给两个div都设置float:left，给.divStyle设置固定宽度（比如各48%），删掉左右margin，再给父元素加overflow:hidden清除浮动即可，flex方案适配性更优。

内容的提问来源于stack exchange，提问作者Atramentis