HTML如何实现两个<div>元素在同一行/同一排正常显示

使用float实现两栏同排布局时，仅给左侧.content设置了150px固定宽度，右侧.info未设置宽度约束。当.info内为多行长文本时，浮动元素会默认占满整行可用宽度，将左侧浮动元素挤压到下一行，最终出现布局错乱。

不需要改动原有业务内容，仅调整CSS、补全浮动清除逻辑即可：

• 给右侧.info设置明确宽度，扣除左侧栏占用宽度和预留间距，避免长文本撑满整行
• 给浮动元素添加box-sizing: border-box，让边框、内边距计入元素设定宽度，避免宽度溢出换行
• 新增浮动清除规则，解决浮动元素脱离文档流导致的父容器高度塌陷问题

完整修复后CSS代码 #

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

.info {
  text-align: left;
  font-size: 20px;
  float: right;
  /* 总宽度扣除左侧150px栏宽、2px边框、18px左右间距 */
  width: calc(100% - 170px);
  box-sizing: border-box;
}

.content {
  border: 1px solid black;
  color: gray;
  width: 150px;
  float: left;
  box-sizing: border-box;
}

.p1 {
  text-align: left;
  margin-left: 10px;
}

/* 清除浮动工具类 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

HTML调整说明 #

仅需要将两个浮动的div用带clearfix类的父容器包裹即可，原有内部内容完全不需要修改，调整后结构参考：

<h1>Good Health and Well being</h1>
<div class="clearfix">
  <div class='content'>
    <h1>Content</h1>
    <p class='p1'>content</p>
  </div>
  <div class='info'>
    <h2><b>What do good health and well-being mean?</b></h2>
    <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

    <h2><b>Why are good health and well-being so important?</b></h2>
    <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

    <h2><b>How do you keep good health?</b></h2>
    <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
  </div>
</div>

• 修复前多行文本错乱效果：
• 单行文本临时正常效果：
• 修复后达到的期望效果：

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