如何让div row容器内的3列盒子超出外层父div容器外展示

核心修改思路 #

你之前使用float布局的问题是：当子元素总宽度超过父容器宽度时会自动换行，无法实现超出效果，调整方案如下：

1. 替换float布局为flex布局，强制子元素不换行
2. 父容器保持默认overflow: visible，不要设置overflow: hidden
3. 通过负边距控制子元素上下超出父容器的距离

修改后的完整代码 #

CSS部分

/* 公共列样式，避免三个类重复写相同属性 */
.column {
  width: 300px;
  text-align: center;
  padding: 100px 20px;
  border-radius: 10%;
  box-shadow: 0 4px 2px -2px #5E5E5E;
}
.column1 {
  background-color: #e5e4e2;
}
.column2 {
  background-color: #a9a9a9;
}
.column3 {
  background-color: #000000;
  color: #fff;
}
.row {
  display: flex;
  flex-wrap: nowrap; /* 强制列不换行，宽度不足时直接超出父容器 */
  justify-content: center;
  gap: 160px; /* 统一控制列间距 */
  margin-bottom: -100px; /* 控制卡片向下超出父容器的高度，可根据需求调整数值 */
  /* 如果需要向上超出父容器，可额外添加 margin-top: 对应数值 */
}

HTML部分

<div style="width:100%;background-color: #c5c5c5;margin-top:100px;padding-top:100px;">
  <h3 style="text-align: center;font-size:30pt">Are thinking all the time about...</h3>
  <h3 style="text-align: center;padding-bottom: 100px;font-size:30pt">(how to solve main problem), then these 3 ideas for you</h3>

  <div class="row">
    <div class="column column1"><img style="padding-bottom:20px" src="images/circle.png">
      <h3 style="padding-bottom:20px;font-size:16pt">Method 1</h3>
      <p style="font-size: 14pt;">Visual icon above and subtext comes here</p>
    </div>
    <div class="column column2"><img style="padding-bottom:20px" src="images/circle.png">
      <h3 style="padding-bottom:20px;font-size:16pt">Method 2</h3>
      <p style="font-size: 14pt;">Visual icon above and subtext comes here</p>
    </div>
    <div class="column column3"><img style="padding-bottom:20px" src="images/circle.png">
      <h3 style="padding-bottom:20px;font-size:16pt">Method 3</h3>
      <p style="font-size: 14pt;">Visual icon above and subtext comes here</p>
    </div>
  </div>

</div>

补充说明 #

如果需要列左右超出时不出现横向滚动条，可以给页面body或者最外层容器加overflow-x: hidden即可，不会影响子元素上下超出的效果。

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