You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

背景图片设置问题求助:为何.box-3无法推开.box-2?

问题分析与解决:内容无法推开下方元素

首先得提一句:你贴的代码里并没有.box-3,推测应该是笔误——大概率是.box-1里的内容没法把.box-2往下推开,导致溢出的内容和.box-2重叠了?

问题根源

你给.box-1设置了固定高度height:250px,但里面的两列文本内容总高度已经超过了250px。而CSS默认的overflow属性是visible,超出容器的内容会直接显示在外面,自然就覆盖了下面的.box-2,看起来像是没把它推开。

三种解决思路

  • 去掉固定高度:直接删掉.box-1height:250px,让容器根据内部内容自动撑开高度,这样就能自然把.box-2挤到下方。
  • min-height替代height:如果想保留“至少250px高度”的限制,可以改成min-height:250px,当内容超过250px时,容器会自动增高。
  • 处理溢出内容(需固定高度):如果必须保持250px的固定高度,给.box-1加上overflow: auto,让超出的内容在容器内滚动,不会影响.box-2的位置。

修改后的示例代码

/* 方案1:去掉固定高度 */
.box-1 { width: 100%; background-image: url(https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202017/Magazine-Articles/April/Google-Auto-Profile-images-2017/PRF-203); }

/* 方案2:用min-height保留最小高度 */
/* .box-1 { min-height: 250px; width: 100%; background-image: url(https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202017/Magazine-Articles/April/Google-Auto-Profile-images-2017/PRF-203); } */

/* 方案3:固定高度+内部滚动 */
/* .box-1 { height: 250px; width: 100%; background-image: url(https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202017/Magazine-Articles/April/Google-Auto-Profile-images-2017/PRF-203); overflow: auto; } */

.box-2 { width: 100%; height: 50px; background-color: #000; color: #fff; }
<div class="box-1">
  <div class="row">
    <div class="col-lg-6">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur
    </div>
    <div class="col-lg-6">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur
    </div>
  </div>
</div>
<div class="box-2">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>

另外补充一句:你的背景图URL看起来缺少文件后缀(比如.jpg),建议确认链接有效性,避免背景图加载失败。

内容的提问来源于stack exchange,提问作者Johnny94

火山引擎 最新活动