如何实现两个Section大屏并排、小屏上下的响应式布局？

AI 小北

2026-7-5

问题根源分析

容器宽度设置完全错误：.container的width: calc(235vw - 220px)会让容器宽度超过视窗2倍以上，直接撑破布局，这是导致异常边距的核心原因。
缺少父级flex容器：两个section是同级元素，大屏下没有父容器做flex布局，自然没法并排。
媒体查询里的transform缩放破坏布局流：transform: scale()只是视觉缩放，不会改变元素实际占据的空间，加上负margin会让布局彻底混乱。

修复方案

1. 调整HTML结构，添加父容器

给两个section套一个父容器，用来控制大屏下的并排布局：

<div class="product-container">
  <section class="container">
    <div class="carousel">
      <input type="radio" name="slides" checked="checked" id="slide-1">
      <input type="radio" name="slides" id="slide-2">
      <input type="radio" name="slides" id="slide-3">
      <ul class="carousel__slides">
        <li class="carousel__slide">
          <div>
            <img src="/WesternDigital/images/wd-black-sn770m.webp" alt="wd black sn770m">
          </div>
        </li>
        <li class="carousel__slide">
          <div>
            <img src="/WesternDigital/images/wd-black-sn770m-hand.webp" alt="wd black sn770m in a hand">
          </div>
        </li>
        <li class="carousel__slide">
          <div>
            <img src="/WesternDigital/images/wd-black-sn770m-steamdeck.webp" alt="wd black sn770m with steamdeck">
          </div>
        </li>
      </ul>
      <ul class="carousel__thumbnails">
        <li>
          <label for="slide-1"><img src="/WesternDigital/images/wd-black-sn770m.webp" alt="wd black sn770m thumbnail"></label>
        </li>
        <li>
          <label for="slide-2"><img src="/WesternDigital/images/wd-black-sn770m-hand.webp" alt="wd black sn770m in a hand thumbnail"></label>
        </li>
        <li>
          <label for="slide-3"><img src="/WesternDigital/images/wd-black-sn770m-steamdeck.webp" alt="wd black sn770m with steamdeck thumbnail"></label>
        </li>
      </ul>
    </div>
  </section>

  <section class="data">
    <p>Part#: WDBDNH5000ABK-WRSN</p>
    <h1>WD_BLACK SN770M NVMe™ SSD</h1>
    <h2>from WD_BLACK</h2>
    <div class="star-rating" id="star-rating">
      <ul>
        <li data-value="1"></li>
        <li data-value="2"></li>
        <li data-value="3"></li>
        <li data-value="4"></li>
        <li data-value="5"></li>
      </ul>
    </div>
    <ul class="capacity">
      <li>
        <input type="radio" id="500gb" name="capactity" checked="checked" />
        <label for="500gb">500GB</label>
      </li>
      <li>
        <input type="radio" id="1tb" name="capactity" />
        <label for="1tb">1TB</label>
      </li>
      <li>
        <input type="radio" id="2tb" name="capactity" />
        <label for="2tb">2TB</label>
      </li>
    </ul>
  </section>
</div>

2. 重写CSS布局规则

删除原有不合理的宽度、负margin和transform，改用flex实现响应式布局：

section {
  background: #F4F4F4;
  overflow: hidden;
}

/* 新增父容器，控制整体布局 */
.product-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 重置.container的错误样式 */
.container {
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
}

.carousel {
  display: block;
  text-align: left;
  position: relative;
}

/* 保留原有carousel内部样式 */
.carousel input {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

.carousel input:nth-of-type(3):checked~.carousel__slides .carousel__slide:first-of-type {
  margin-left: -200%;
}

.carousel input:nth-of-type(2):checked~.carousel__slides .carousel__slide:first-of-type {
  margin-left: -100%;
}

.carousel input:nth-of-type(1):checked~.carousel__slides .carousel__slide:first-of-type {
  margin-left: 0%;
}

.carousel input:nth-of-type(1):checked~.carousel__thumbnails li:nth-of-type(1) {
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 255, 0.5);
}

.carousel input:nth-of-type(2):checked~.carousel__thumbnails li:nth-of-type(2) {
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 255, 0.5);
}

.carousel input:nth-of-type(3):checked~.carousel__thumbnails li:nth-of-type(3) {
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 255, 0.5);
}

.carousel__slides {
  position: relative;
  z-index: 1;
  padding: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
}

.carousel__slide {
  position: relative;
  display: block;
  flex: 1 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all 300ms ease-out;
  box-sizing: border-box;
  white-space: normal;
}

.carousel__slide div {
  width: 100%;
}

.carousel__slide img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: auto;
  image-rendering: optimizeQuality;
}

.carousel__thumbnails {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  margin: 0 -10px;
  margin-top: 20px;
}

.carousel__thumbnails li {
  flex: 1 1 auto;
  max-width: calc((100% / 3) - 20px);
  margin: 0 10px;
  transition: all 300ms ease-in-out;
}

.carousel__thumbnails label {
  display: block;
  cursor: pointer;
}

.carousel__thumbnails label img {
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.25);
  transition: all 300ms ease-in-out;
}

.carousel__thumbnails img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 大屏并排布局 */
@media (min-width: 768px) {
  .product-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
  }

  .container {
    flex: 0 0 55%;
    margin: 0;
  }

  .data {
    flex: 1;
  }
}

/* 保留评分、容量选择样式 */
.star-rating {
  display: inline-block;
  font-size: 0;
}

.star-rating ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.star-rating li {
  display: inline-block;
  cursor: pointer;
  margin: 0 5px;
}

.star-rating li::before {
  content: "\2605";
  font-size: 24px;
  color: #ccc;
  transition: color 0.2s;
}

.star-rating li:hover::before,
.star-rating li.selected::before {
  color: #0377BD;
}

.capacity {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.capacity li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  margin-right: 10px
}

.capacity label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'roboto';
  font-weight: 600;
  width: 100px;
  height: 40px;
  color: var(--color-background2);
  border: black solid;
  color: var(--color-background1);
}

.capacity input[type="radio"] {
  opacity: 0.01;
}

.capacity input[type="radio"]:checked+label,
.Checked+label {
  background: var(--color-background1);
  color: var(--color-background2);
}

.capacity label:hover {
  background: #DDD;
}

3. 移除无效媒体查询

删掉原有@media (min-width: 422px) and (max-width: 767px)里的负margin和transform规则，该规则只会干扰布局，平板端布局可根据需求重新设置合理的flex比例。

修复后效果

小屏（<768px）：carousel在上，产品信息在下，保持原有正常显示。
大屏（≥768px）：两个section并排显示，无异常边距，布局稳定。

关键修改说明

用父容器product-container的flex布局实现大屏并排，这是响应式布局的标准方案。
彻底删除.container中不合理的235vw宽度，改用固定比例或flex占比，确保容器在正常布局流内。
移除transform: scale()和负margin，避免视觉缩放与布局偏移的冲突。

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

如何实现两个Section大屏并排、小屏上下的响应式布局？

问题根源分析 #

修复方案 #