gpt4 book ai didi

javascript - 图片重叠 div 响应问题

转载 作者:太空宇宙 更新时间:2023-11-04 10:14:41 25 4
gpt4 key购买 nike

在此页面中,基本上是此处的轮播页面: http://getbootstrap.com/examples/carousel/

我对其进行了编辑,添加了一个包含与 div 重叠的图像的部分。现在总的来说,它看起来像我想要的,但是当您更改浏览器窗口的分辨率时,文本的布局会发生变化,因此在一种分辨率下整个段落被 chop ,在另一种布局上 chop 较少,因此取决于我最终得到的文本在不同的分辨率下,它可能会或可能不会被切断。我可以增加蓝色部分的高度以适应,但我真正想要的是扩展它以适应文本并留出一些填充底部。

我如何使它保持一致,以便在文本之后始终有 40 像素的填充,并且所有文本都显示在图像下方的蓝色部分中?

网址在这里: http://192.34.63.75/test.html

只有我编辑的 css 是:

<style>
.blue {
color: #ffffff;
background-color: #009cde;
background-image: radial-gradient(circle farthest-side at center bottom, #009cde, #003087 125%);
height:500px;
}

#situational {
padding-top:100px;
margin:0 auto;
text-align: center;
height:450px;
}

.overlap-image {
max-width: 100%;
height:auto;
position:relative;
z-index:10;
}
</style>

最佳答案

.blue {
color: #FFF;
background-color: #009CDE;
background-image: radial-gradient(circle farthest-side at center bottom , #009CDE, #003087 125%);
height: 500px;
}

改为

.blue {
color: #FFF;
background-color: #009CDE;
background-image: radial-gradient(circle farthest-side at center bottom , #009CDE, #003087 125%);
padding-bottom:50px;
}

div 将占据段落的高度,并在底部添加 50px 的内边距。切勿在响应式 div 上设置固定高度。让div的内容控制div的高度。

关于javascript - 图片重叠 div 响应问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37327666/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com