求助：实现Div上下排列及右侧描述的CSS布局问题

嗨，我来帮你搞定这个布局需求！你想要的是每个计算器模块和对应的描述组成独立组，横向排列，窗口缩小时自动换行的分屏视图对吧？之前用inline-block加float+padding定位的方式确实不够灵活，很容易出现布局错乱，推荐你用更现代的CSS布局方案——Flexbox或者Grid，这俩能轻松实现你要的响应式效果，代码也更整洁。

核心思路：先分组，再布局 #

原来的HTML结构把计算器和描述平级放置，导致布局很难控制。咱们先把每个计算器和它的描述包在一个父容器里（比如叫.calc-group），让每组成为一个独立的布局单元，这样不管怎么调整窗口，每组的结构都不会散。

方案1：Flexbox实现（兼容性好，易上手） #

重构后的HTML

<div id="body">
  <!-- 第一组：计算器+描述 -->
  <div class="calc-group">
    <div class="calc">
      <script type="text/javascript" src="calc1.js"></script>
    </div>
    <div class="calc-desc">
      <ul>
        <li>计算器1的功能描述1</li>
        <li>计算器1的功能描述2</li>
      </ul>
    </div>
  </div>

  <!-- 第二组：计算器+描述 -->
  <div class="calc-group">
    <div class="calc">
      <script type="text/javascript" src="calc2.js"></script>
    </div>
    <div class="calc-desc">
      <ul>
        <li>计算器2的功能描述1</li>
        <li>计算器2的功能描述2</li>
      </ul>
    </div>
  </div>
</div>

我把calc1/calc2统一成了.calc类，calc1-desc/calc2-desc统一成.calc-desc，减少重复CSS代码，以后加更多计算器也方便。

对应的CSS

/* 全局容器：用Flex实现组的自动换行 */
#body {
  display: flex;
  flex-wrap: wrap; /* 窗口宽度不足时，组自动换行 */
  gap: 2rem; /* 组之间的间距，比margin更直观，不会有重叠问题 */
  padding: 2rem;
  background-color: #f5f5f5; /* 可选，给背景加个颜色区分 */
}

/* 每个计算器组：内部用Flex让计算器和描述横向排列 */
.calc-group {
  display: flex;
  align-items: flex-start; /* 让计算器和描述顶部对齐 */
  width: calc(50% - 1rem); /* 每行放2组，减去gap的一半，刚好填满容器 */
  background: white;
  border: 1px solid #ddd;
  padding: 1.5rem;
  box-sizing: border-box; /* 让padding和border不额外占用宽度，避免布局溢出 */
}

/* 计算器模块样式 */
.calc {
  width: 40%; /* 组内计算器占40%宽度 */
  margin-right: 1.5rem;
  /* 保留你原来的样式 */
  border-style: solid;
  padding: 20px;
}

/* 描述模块样式 */
.calc-desc {
  flex: 1; /* 占据组内剩余的全部宽度 */
}

.calc-desc ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* 响应式适配：小屏幕时每组占满一行，组内改成纵向排列 */
@media (max-width: 768px) {
  .calc-group {
    width: 100%;
    flex-direction: column; /* 组内元素从上到下排列 */
  }
  
  .calc {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1rem; /* 给描述留间距 */
  }
}

方案2：Grid实现（更简洁的响应式） #

如果你想更省事，CSS Grid的auto-fit+minmax能自动根据窗口宽度调整列数，代码更短：

#body {
  display: grid;
  /* 自动适配列数，最小宽度450px，超出后自动平分宽度 */
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 2rem;
  padding: 2rem;
  background-color: #f5f5f5;
}

.calc-group {
  display: flex;
  align-items: flex-start;
  background: white;
  border: 1px solid #ddd;
  padding: 1.5rem;
}

/* 剩下的.calc和.calc-desc样式和方案1一样 */

为什么这个方案更好？ #

• 分组布局让结构更清晰，不会出现元素错位；
• Flex/Grid都是现代CSS布局方案，比inline-block+float更稳定，没有空格、margin塌陷等问题；
• 响应式媒体查询让小屏幕体验更好；
• 统一类名减少重复代码，后期维护更轻松。

你可以根据自己的喜好选其中一个方案，把代码替换成你原来的内容就行，有问题随时问哦！

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