如何让新增内容div固定在左侧边栏右侧，避免排列到侧边栏下方？

问题根源 #

你当前的代码存在两个核心问题：

• 没有把侧边栏和主内容区放在同一个布局父容器内管控排列规则
• 现有#container_head默认是100%宽度的块级元素，没有指定明确宽度，加float也无法和其他元素并排

第一步：调整HTML结构 #

在header下方新增布局包裹容器，将侧边栏和你要添加的文本内容div统一放入：

<div id="box">
  <div id="header">
    <!-- 原有header的所有代码保持不变即可 -->
  </div>
  <!-- 新增布局容器 -->
  <div class="layout-wrapper">
    <!-- 原有侧边栏 -->
    <div id="container_head"></div>
    <!-- 新增文本内容容器 -->
    <div id="main_content">
      此处放置你需要展示的大量文本内容
    </div>
  </div>
</div>

第二步：修改/新增CSS样式 #

这里提供两种方案，按需选择即可：

方案1：float布局（适配你原来的写法）

/* 布局容器 */
.layout-wrapper {
  width: 100%;
}
/* 侧边栏样式修改 */
#container_head {
  background-color: var(--color-secondary);
  height: 200px;
  width: 25%; /* 可自行调整侧边栏宽度 */
  float: left;
}
/* 主内容区样式 */
#main_content {
  width: 75%;
  float: left;
  padding: 15px;
  box-sizing: border-box; /* 避免padding撑宽容器 */
  font-size: 14px;
  line-height: 1.6;
}
/* 清除浮动，避免父容器高度塌陷 */
.layout-wrapper::after {
  content: "";
  display: block;
  clear: both;
}

方案2：flex布局（更简单，无需处理浮动问题）

/* 布局容器直接设为flex */
.layout-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
}
/* 侧边栏样式修改 */
#container_head {
  background-color: var(--color-secondary);
  height: 200px;
  width: 25%; /* 可自行调整侧边栏宽度 */
  flex-shrink: 0; /* 防止侧边栏被内容挤压变形 */
}
/* 主内容区样式 */
#main_content {
  flex-grow: 1; /* 自动占满剩余宽度 */
  padding: 15px;
  font-size: 14px;
  line-height: 1.6;
}

内容的提问来源于stack exchange，提问作者João Silva