使用CSS与Bootstrap 4创建响应式矩形div的适配问题

我来帮你搞定这个布局难题！先梳理下现有代码里的几个核心问题：

• 绝对定位的.speech-bubble1在移动端会和右侧容器重叠，直接打乱布局
• float: left的列表项在小屏幕会溢出容器，导致文本撑满宽度无法收缩
• 固定的height: 150px不适合响应式场景，小屏幕下内容容易被截断
• 存在重复的CSS代码，维护起来很麻烦

下面是修改后的完整代码，既能还原你想要的桌面端效果，又能完美适配移动端：

修改后的HTML #

<div class="full-width-banner">
  <!-- 左侧ADD盒子 -->
  <div class="speech-bubble speech-bubble-left">
    <div class="content-wrapper">
      <h3 class="strong-text felinetitle">ADD</h3>
      <ul id="feline-ul">
        <li>
          <h6>Heartworm Test</h6>
        </li>
        <li>
          <h6>$25</h6>
        </li>
      </ul>
    </div>
  </div>
  
  <!-- 右侧A LA CARTE盒子 -->
  <div class="speech-bubble speech-bubble-right">
    <div class="container content-wrapper">
      <h3 class="strong-text felinetitle2">A LA CARTE</h3>
      <div class="item-grid">
        <div class="item">DHPP or DHLPP</div>
        <div class="item">Canine Flu</div>
        <!-- 后续可继续添加更多项目 -->
      </div>
    </div>
  </div>
</div>

修改后的CSS #

/* 全局基础重置，确保布局不受默认样式干扰 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 全宽容器：用Flex实现左右分栏布局 */
.full-width-banner {
  display: flex;
  width: 100%;
  min-height: 150px;
}

/* 统一气泡样式，减少代码重复 */
.speech-bubble {
  background-color: #045faf;
  color: white;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 左侧气泡：占32%宽度，保留阴影效果 */
.speech-bubble-left {
  width: 32%;
  z-index: 1;
  box-shadow: 18px 0px 35px -23px rgba(0,0,0,0.52);
}

/* 右侧气泡：占剩余68%宽度 */
.speech-bubble-right {
  width: 68%;
}

/* 内容容器：限制内边距，防止文本贴边 */
.content-wrapper {
  padding: 35px 20px;
  text-align: center;
  width: 100%;
}

/* 左侧列表：用Flex代替Float，适配各种屏幕 */
#feline-ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  gap: 40px; /* 用gap代替margin-left，布局更灵活 */
  margin-top: 10px;
}

/* 右侧项目网格：用Flex实现响应式排列 */
.item-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.item-grid .item {
  flex: 0 0 auto;
  min-width: 120px; /* 设置最小宽度，避免文本挤成一团 */
}

/* 移动端适配：屏幕小于768px时切换为垂直布局 */
@media (max-width: 768px) {
  .full-width-banner {
    flex-direction: column;
  }
  
  .speech-bubble-left,
  .speech-bubble-right {
    width: 100%;
  }
  
  .speech-bubble-left {
    box-shadow: 0px 8px 35px -23px rgba(0,0,0,0.52); /* 阴影改为底部，适配垂直布局 */
  }
}

关键改进点说明： #

1. Flexbox重构布局：替换绝对定位和float，让布局更稳定，自动适配不同屏幕尺寸
2. 去掉固定高度：用min-height和内边距padding控制容器高度，确保内容不会被截断
3. 响应式适配：添加媒体查询，移动端自动切换为垂直布局，避免容器重叠
4. 文本容器限制：通过content-wrapper和min-width确保文本始终在容器内，不会撑破宽度
5. 简化CSS代码：合并重复样式，用gap代替margin-left，布局逻辑更清晰，维护更方便

这样修改后，你的布局就能完美还原示例效果，同时在移动端也能正常显示啦！

内容的提问来源于stack exchange，提问作者Joshua C.