HTML/CSS实现响应式并排圆形及内部多行文本布局问题

我来帮你搞定这个问题！要实现响应式并排圆形+内部多行文本，用Flexbox就能轻松解决，这是目前最简洁且适配性拉满的方案。咱们一步步来调整：

问题根源 #

你现在的圆形上下排列，大概率是因为圆形元素默认是块级元素，会占满整行宽度，所以自动换行到下一行。咱们只需要给它们加个Flex容器，就能让它们横向排列，同时保留响应式特性。

完整解决方案代码 #

HTML结构

先把每个圆形的多行文本结构明确，用两个span（或p标签）分别承载上下文本：

<div class="circles-wrapper">
  <div class="stats-circle">
    <span class="big-text">450</span>
    <span class="small-text">reviews</span>
  </div>
  <div class="stats-circle">
    <span class="big-text">4.2 million</span>
    <span class="small-text">readers</span>
  </div>
</div>

CSS样式

核心是用Flex布局实现并排，同时给圆形内部也加Flex来垂直排列文本：

/* 外层容器：控制圆形并排+响应式换行 */
.circles-wrapper {
  display: flex;
  gap: 2.5rem; /* 圆形之间的间距，可自定义 */
  flex-wrap: wrap; /* 屏幕宽度不够时自动换行 */
  justify-content: center; /* 让圆形在容器中水平居中 */
  padding: 2rem 1rem;
}

/* 圆形基础样式 */
.stats-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%; /* 关键：把方块变圆形 */
  background-color: #f5f5f5; /* 背景色可根据需求修改 */
  display: flex;
  flex-direction: column; /* 内部文本垂直排列 */
  justify-content: center; /* 文本垂直居中 */
  align-items: center; /* 文本水平居中 */
  text-align: center;
  padding: 1.5rem;
  /* 响应式适配：最小宽度160px，自动填充剩余空间 */
  flex: 1 1 160px;
}

/* 圆形内的文本样式 */
.big-text {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.small-text {
  font-size: 1rem;
  color: #666;
}

关键细节解释 #

1. 并排布局实现：circles-wrapper 用 display: flex 让子元素横向排列，flex-wrap: wrap 保证在手机等小屏幕上，圆形会自动换行，不会挤在一起。
2. 多行文本居中：每个 stats-circle 内部用 flex-direction: column 让上下文本垂直排列，再通过 justify-content: center 和 align-items: center 让文本完美居中在圆形里。
3. 响应式适配：flex: 1 1 160px 是核心——当屏幕足够宽时，两个圆形会平分容器的可用空间；当屏幕宽度小于两个圆形的最小宽度之和时，会自动换行，保证在任何设备上都有良好显示效果。

如果偏好Grid布局，也可以把容器样式改成这样，效果一样：

.circles-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2.5rem;
  justify-items: center;
  padding: 2rem 1rem;
}

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