响应式定价页问题：Combo套餐文本错位及移动端排序调整

问题1：Combo套餐文本溢出到页面底部 #

原代码中#pricing设置了固定高度95vh，小屏幕下内容高度超出容器限制；同时响应式代码里的margin-top:100vh将元素过度下移，加上原float/absolute定位的冲突，导致内容错位。

问题2：小屏幕下调整Combo套餐到最后 #

通过CSS Flexbox的order属性即可实现，无需修改HTML结构。

修改后的完整代码 #

HTML（修复id拼写错误）

<div id="pricing">
  <h1>Our Pricing:</h1>

  <div class="smallTile" id="photo">
    <h2>Photography<br>Plan</h2>
    <hr class="topHR">
    <p><span>0 - 10 Pictures</span><br>$100</p>
    <hr>
    <p><span>10 - 20 Pictures</span><br>$175</p>
    <hr>
    <p><span>20+ Pictures</span><br>$250</p>
  </div>

  <div class="smallTile" id="video">
    <h2>Videography<br>Plan</h2>
    <hr class="topHR">
    <p><span>0 - 5 Videos</span><br>$100</p>
    <hr>
    <p><span>5 - 10 Videos</span><br>$150</p>
    <hr>
    <p><span>Edited Video</span><br>Additional $50</p>
  </div>

  <div class="largeTile" id="combo">
    <h2 id="comboHeader">Combo<br>Plan</h2>
    <hr class="topHR">
    <p><span>Combined price of both plans</span><br>$50 Reduced</p>
    <hr>
  </div>
</div>

CSS（核心修改点标注）

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

#pricing {
  /* 改固定高度为最小高度，自适应内容 */
  min-height: 95vh;
  width: 100vw;
  background-color: #E5EDFB;
  margin-top: 0; /* 修复原代码里的margin-top:none错误 */
  /* 桌面端用flex布局排列三个套餐 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8.75%;
  box-sizing: border-box;
}

h1 {
  color: #0E0A24;
  padding-left: 8.75%;
  padding-top: 5vh;
  font-size: 300%;
  /* 把标题移出flex容器，避免影响布局 */
  position: absolute;
  top: 0;
}

h2 {
  color: #0E0A24;
  text-align: center;
  margin-top: 4vh;
  font-weight: 600;
  font-size: 175%;
}

p {
  color: #0E0A24;
  text-align: center;
  font-weight: 300;
}

span {
  font-size: 120%;
  font-weight: 400;
}

.smallTile {
  background-color: white;
  width: 23vw;
  height: 65%;
  border-radius: 15px;
  /* 给套餐添加内边距，避免内容贴边 */
  padding: 2vh 0;
  box-sizing: border-box;
}

.largeTile {
  background-color: white;
  width: 28vw;
  height: 70%;
  border-radius: 15px;
  padding: 2vh 0;
  box-sizing: border-box;
}

/* 移除原float和absolute定位，由flex统一管理 */

hr {
  margin-top: 6%;
  margin-bottom: 6%;
  width: 20%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0E0A24;
  border: none;
  height: 0.1px;
}

.topHR {
  width: 50%;
  margin-top: 4vh;
  margin-bottom: 4vh;
  height: 2px;
  border-radius: 1px;
}

#comboHeader {
  font-weight: 900;
  font-size: 200%;
}

@media screen and (max-width: 1100px) {
  body {
    background-color: red;
  }

  #pricing {
    /* 小屏幕改为垂直排列 */
    flex-direction: column;
    padding-top: 15vh; /* 给标题留出空间 */
    min-height: auto;
  }

  .smallTile, .largeTile {
    width: 86vw;
    height: auto;
    margin-bottom: 5vh; /* 套餐之间添加间距 */
  }

  /* 通过order属性调整显示顺序，Combo排在最后 */
  #photo { order: 1; }
  #video { order: 2; }
  #combo { order: 3; }

  h1 {
    margin-bottom: 20px;
    position: static;
    padding-left: 6.75%;
  }
}

关键修改说明 #

1. 修复内容溢出：
   • 将#pricing的固定高度改为min-height，让容器随内容自动扩展
   • 移除错误的margin-top:none，改为margin-top:0
   • 用Flexbox替代float/absolute定位，避免定位冲突导致的内容错位
2. 调整套餐顺序：
   • 在响应式媒体查询中，将#pricing的flex方向改为垂直排列
   • 利用order属性指定每个套餐的显示顺序，无需修改HTML结构

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