Question

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

我编辑它以添加一个图像与div重叠的部分。现在一般看起来我想要但是当你改变浏览器窗口的分辨率时，文本的布局会改变，所以在一个分辨率上整个段落都会被切断，在另一个布局上会减少截断，所以取决于我最终的文本在不同的分辨率下它可能会或可能不会被截止。我可以增加蓝色部分的高度以适应但我真正想要的是它扩展以适应文本加上留下一些填充底部。

如何使其保持一致，因此文本后总是有40px的填充，而所有文本都显示在图像下方的蓝色部分？

网址在这里： 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>

Answer 1

.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高度。

图片重叠div响应问题

1 个答案: