如何让六DIV布局模型实现响应式适配（符合WCAG 2.1）

开发者阿泽

2026-8-13

响应式布局改造需求（符合WCAG 2.1）

我用一个container div包裹6个div实现了当前布局，桌面端运行正常，但需要添加响应式适配以符合WCAG 2.1标准。尝试过flexbox和grid，但没找到最优方案，只需要一个断点：断点后所有div变成单列，主主题在最顶部，子主题按1-2-3-4的顺序垂直排列。

桌面视图：中心圆形主主题，四个子主题分别位于左上、右上、左下、右下
移动端视图：主主题居顶部，四个子主题按顺序垂直排列

以下是原代码：

原CSS代码

.container { display: relative; width: 700px; height: 400px; background-color: #BEE5F4; }
.subTopics { width: 250px; height: 100px; background: #94D9F2; color: #000000; font-weight: 700; font-size: large; }
p { padding: 10px; }
#subTopic1 { position: absolute; left: 25px; top: 50px; }
#subTopic2 { position: absolute; left: 425px; top: 50px; text-align: right; }
#subTopic3 { position: absolute; left: 25px; top: 250px; }
#subTopic4 { position: absolute; left: 425px; top: 250px; text-align: right; }
#mainTopic { width: 250px; height: 250px; border-radius: 50% 50% 50% 50%; border: solid 1px rgb(255, 255, 255); background-color: #ffffff; position: absolute; left: 225px; top: 75px; text-align: center; color: #000000; font-weight: 700; position: absolute; overflow: hidden; }
.tittel { color: rgb(0, 0, 0); position: relative; top: 40px; font-size: xx-large; text-align: center; color: #000000; font-weight: 700; }
.circeBack { width: 290px; height: 290px; border-radius: 50% 50% 50% 50%; background-color: #BEE5F4; position: absolute; left: 205px; top: 55px; }
a { text-decoration: none; color: #000000; }
#mainTopic:hover { background-color: rgb(255, 255, 255); box-shadow: 2px 2px 22px 2px #94D9F2; -webkit-box-shadow: 1px 1px 21px 1px #94D9F2; -moz-box-shadow: 1px 1px 21px 1px #94D9F2; }
#subTopic1:hover { background-color: rgb(255, 255, 255); box-shadow: 10px 6px 21px -4px #94D9F2; -webkit-box-shadow: -20px -20px 21px -4px #94D9F2; -moz-box-shadow: -20px -20px 21px -4px #94D9F2; }
#subTopic2:hover { background-color: rgb(255, 255, 255); box-shadow: 10px 6px 21px -4px #94D9F2; -webkit-box-shadow: 20px -20px 21px -4px #94D9F2; -moz-box-shadow: 20px -20px 21px -4px #94D9F2; }
#subTopic3:hover { background-color: rgb(255, 255, 255); box-shadow: 10px 6px 21px -4px #94D9F2; -webkit-box-shadow: -20px 20px 21px -4px #94D9F2; -moz-box-shadow: -20px 20px 21px -4px #94D9F2; }
#subTopic4:hover { background-color: rgb(255, 255, 255); box-shadow: 10px 6px 21px -4px #94D9F2; -webkit-box-shadow: 20px 20px 21px -4px #94D9F2; -moz-box-shadow: 20px 20px 21px -4px #94D9F2; }

原HTML代码

<div class="container">
  <div class="subTopics" id="subTopic1">
    <a href="">
      <p>Sub topic 1</p>
    </a>
  </div>
  <div class="subTopics" id="subTopic2">
    <a href="">
      <p>Sub topic 2</p>
    </a>
  </div>
  <div class="subTopics" id="subTopic3">
    <a href="">
      <p>Sub topic 3</p>
    </a>
  </div>
  <div class="subTopics" id="subTopic4">
    <a href="">
      <p>Sub topic 4</p>
    </a>
  </div>
  <div class="circeBack"></div>
  <div class="circeFront" id="mainTopic">
    <a href="">
      <p class="tittel">Main <br> topic</p>
  </div>
</div>

改造方案

核心修改点

修复原代码中.container的display: relative错误，改为position: relative（绝对定位元素的父容器必须设置该属性）
添加媒体查询断点（以768px为例，可按需调整），在断点内用flex实现单列布局，将主主题移到顶部
优化文字居中、区块可点击范围，符合WCAG可读性与交互标准

修改后的完整代码

CSS代码

.container { 
  position: relative; /* 修正原属性错误 */
  width: 700px; 
  height: 400px; 
  background-color: #BEE5F4;
  margin: 0 auto; /* 可选：让容器居中 */
}

.subTopics { 
  width: 250px; 
  height: 100px; 
  background: #94D9F2; 
  color: #000; 
  font-weight: 700; 
  font-size: large;
  display: flex;
  align-items: center; /* 文字垂直居中 */
}

p { 
  padding: 10px; 
  margin: 0; /* 移除默认间距避免布局偏移 */
}

#subTopic1 { position: absolute; left: 25px; top: 50px; }
#subTopic2 { position: absolute; left: 425px; top: 50px; text-align: right; }
#subTopic3 { position: absolute; left: 25px; top: 250px; }
#subTopic4 { position: absolute; left: 425px; top: 250px; text-align: right; }

#mainTopic { 
  width: 250px; 
  height: 250px; 
  border-radius: 50%; 
  border: solid 1px #fff; 
  background-color: #fff; 
  position: absolute; 
  left: 225px; 
  top: 75px; 
  display: flex;
  align-items: center;
  justify-content: center; /* 主标题居中 */
  color: #000; 
  font-weight: 700; 
  overflow: hidden; 
}

.tittel { 
  color: #000; 
  font-size: xx-large; 
  font-weight: 700; 
  text-align: center;
}

.circeBack { 
  width: 290px; 
  height: 290px; 
  border-radius: 50%; 
  background-color: #BEE5F4; 
  position: absolute; 
  left: 205px; 
  top: 55px; 
}

a { 
  text-decoration: none; 
  color: #000;
  display: block; /* 让整个区块可点击 */
  height: 100%;
  width: 100%;
}

/* 保留原有hover效果 */
#mainTopic:hover { 
  background-color: #fff; 
  box-shadow: 2px 2px 22px 2px #94D9F2; 
  -webkit-box-shadow: 1px 1px 21px 1px #94D9F2; 
  -moz-box-shadow: 1px 1px 21px 1px #94D9F2; 
}

#subTopic1:hover { 
  background-color: #fff; 
  box-shadow: 10px 6px 21px -4px #94D9F2; 
  -webkit-box-shadow: -20px -20px 21px -4px #94D9F2; 
  -moz-box-shadow: -20px -20px 21px -4px #94D9F2; 
}

#subTopic2:hover { 
  background-color: #fff; 
  box-shadow: 10px 6px 21px -4px #94D9F2; 
  -webkit-box-shadow: 20px -20px 21px -4px #94D9F2; 
  -moz-box-shadow: 20px -20px 21px -4px #94D9F2; 
}

#subTopic3:hover { 
  background-color: #fff; 
  box-shadow: 10px 6px 21px -4px #94D9F2; 
  -webkit-box-shadow: -20px 20px 21px -4px #94D9F2; 
  -moz-box-shadow: -20px 20px 21px -4px #94D9F2; 
}

#subTopic4:hover { 
  background-color: #fff; 
  box-shadow: 10px 6px 21px -4px #94D9F2; 
  -webkit-box-shadow: 20px 20px 21px -4px #94D9F2; 
  -moz-box-shadow: 20px 20px 21px -4px #94D9F2; 
}

/* 响应式断点 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    height: auto;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* 增加区块间距 */
  }

  /* 重置所有绝对定位元素为静态定位 */
  #subTopic1, #subTopic2, #subTopic3, #subTopic4, #mainTopic, .circeBack {
    position: static;
    text-align: center;
  }

  /* 将主主题移到顶部 */
  #mainTopic {
    order: -1;
    margin-bottom: 10px;
  }

  /* 移动端隐藏圆形背景 */
  .circeBack {
    display: none;
  }

  .subTopics {
    width: 90%; /* 子主题适配移动端宽度 */
    justify-content: center; /* 文字居中 */
  }
}

HTML代码（修复标签闭合问题）

<div class="container">
  <div class="subTopics" id="subTopic1">
    <a href="">
      <p>Sub topic 1</p>
    </a>
  </div>
  <div class="subTopics" id="subTopic2">
    <a href="">
      <p>Sub topic 2</p>
    </a>
  </div>
  <div class="subTopics" id="subTopic3">
    <a href="">
      <p>Sub topic 3</p>
    </a>
  </div>
  <div class="subTopics" id="subTopic4">
    <a href="">
      <p>Sub topic 4</p>
    </a>
  </div>
  <div class="circeBack"></div>
  <div class="circeFront" id="mainTopic">
    <a href="">
      <p class="tittel">Main <br> topic</p>
    </a>
  </div>
</div>

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

如何让六DIV布局模型实现响应式适配（符合WCAG 2.1）

原CSS代码 #

原HTML代码 #

核心修改点 #

修改后的完整代码 #

CSS代码 #