如何在CSS3中实现div等距分布？适配含侧边栏的自适应布局

我完全明白你这种找不到合适方案的困扰——很多现成的布局技巧要么只针对等宽并排的div场景，要么没法灵活适配你这种混合了文本大框和不同尺寸堆叠图片的结构。针对你的需求，我整理了一套纯CSS的实现方案，完美贴合你的核心要求：

核心实现思路 #

通过CSS变量+动态计算宽度，确保容器始终与右侧保持恒定间距，同时限制最大宽度不超出侧边栏范围；配合盒模型属性让main div自适应缩放，堆叠图片也能跟随容器宽度自适应调整。

完整代码示例 #

HTML结构

<div class="container">
  <div class="main">
    <!-- 这里是你的蓝色文本大框内容 -->
    这是main div内的文本内容，会随容器宽度自适应缩放，同时不会超出侧边栏范围
  </div>
  <div class="images">
    <img src="your-image-1.jpg" alt="尺寸不同的图片1">
    <img src="your-image-2.jpg" alt="尺寸不同的图片2">
  </div>
</div>

CSS样式

/* 自定义变量，方便后续修改参数 */
:root {
  --sidebar-width: 200px; /* 替换成你实际的侧边栏宽度 */
  --right-fixed-gap: 24px; /* 你想要的右侧恒定间距 */
}

.container {
  /* 计算容器最大宽度：视口宽度 - 侧边栏宽度 - 右侧间距 */
  max-width: calc(100vw - var(--sidebar-width) - var(--right-fixed-gap));
  margin-right: var(--right-fixed-gap);
  margin-left: auto; /* 让容器靠左对齐，同时保证右侧间距 */
  padding: 16px; /* 可选：给容器内部添加内边距 */
}

.main {
  background-color: #4285f4; /* 蓝色背景 */
  color: #fff;
  padding: 24px;
  width: 100%; /* 占满容器宽度，自适应缩放 */
  box-sizing: border-box; /* 确保padding不会撑宽元素 */
  margin-bottom: 16px; /* 与下方images div保持间距 */
}

.images {
  width: 100%;
  box-sizing: border-box;
}

.images img {
  width: 100%; /* 图片自适应容器宽度 */
  height: auto; /* 保持图片比例 */
  display: block;
  margin-bottom: 8px; /* 两张堆叠图片之间的间距 */
}

/* 可选：如果侧边栏是固定定位，添加媒体查询优化大屏显示 */
@media (min-width: 768px) {
  .container {
    margin-left: var(--sidebar-width);
  }
}

关键细节说明 #

• CSS变量：用--sidebar-width和--right-fixed-gap统一管理参数，后续修改侧边栏宽度或右侧间距时只需改一处
• 动态宽度计算：max-width: calc(100vw - var(--sidebar-width) - var(--right-fixed-gap))彻底避免容器超出侧边栏和右侧间距的限制
• 盒模型控制：box-sizing: border-box确保元素的padding不会额外撑宽容器，让自适应缩放更准确
• 图片自适应：堆叠图片设置width:100%; height:auto，无论原始尺寸如何，都能跟随容器宽度调整并保持比例

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