响应式布局求助：左侧notice board与右侧main frame对齐问题

算力阿峰

2026-8-20

解决Notice Board与Main Frame的响应式对齐问题

方案1：使用Flexbox实现

这是适配性极强的常用响应式布局方案，代码简洁易维护：

HTML结构

<div class="content-container">
  <div class="notice-board">紧急通知区域</div>
  <div class="main-frame">通用信息展示区域</div>
</div>

CSS样式

/* 外层容器控制整体布局 */
.content-container {
  display: flex;
  gap: 20px; /* 两个区块的间距 */
  padding: 0 15px;
  max-width: 1200px;
  margin: 0 auto; /* 让容器居中，避免超出屏幕范围 */
}

/* 紧急通知栏设置固定占比 */
.notice-board {
  flex: 0 0 28%; /* 不拉伸、不收缩，占容器28%宽度 */
  background: #fff3f3;
  padding: 15px;
  border-radius: 4px;
}

/* 主内容区占满剩余空间 */
.main-frame {
  flex: 1;
  background: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 移动端适配（屏幕宽度≤768px时） */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column; /* 改为垂直堆叠布局 */
  }
  .notice-board {
    flex: 1; /* 移动端占满容器宽度 */
  }
}

方案2：使用Grid实现

Grid布局更适合二维布局场景，代码同样简洁直观：

CSS样式（HTML结构与方案1一致）

.content-container {
  display: grid;
  grid-template-columns: 28% 1fr; /* 第一列占28%，第二列占剩余全部空间 */
  gap: 20px;
  padding: 0 15px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .content-container {
    grid-template-columns: 1fr; /* 切换为单列布局 */
  }
}