Question

我在网站上有一个主页滑块，显然也需要响应移动设备。我正在使用Bootstrap 3作为框架。在桌面上，滑块需要如下所示：

图像是滑块背景图像。 内容块1 是一个半透明的内容框，在图像上方带有文本。 内容块2 与内容块1相似，位于图像的底部，但仍位于图像的上方。 主要内容块是网站页面的其余内容。

在移动设备上，这应该翻译如下。

图像是滑块背景图像。 内容块1 是半透明的内容框，其文本为但在图像的下方。 内容块2 与内容块1类似，并且位于内容块1 之下。 主要内容块是网站页面的其余内容。

在移动设备上，这似乎可行，因为内容块位于图像下方/相对于图像。但是在桌面上，它们也放置在图像下方。我将边距设置为最高：在桌面 Content Block 1 上为-50％，它将内容块向上移动，但是图像也以相同的％缩放（缩小）。

我的CSS。

.carousel-header-container { /* Content block 1 */
    position: relative;
    width: 40%;
    height: auto;
    top: 0%;
    left: 10%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.carousel-content-row { /* Content block 2 */
    position: relative;
    width: 100%; 
    height: 8em;
}
@media only screen and (max-width: 768px) {
    .carousel-header-container { /* Content block 1 */
        position: relative;
        width: 100%;
        height: auto;
        top: 0%;
        left: 0%;
        overflow: hidden;
    }
    .carousel-content-row { /* Content block 2 */
        position: relative; 
        width: 100%; 
        height: 5em;
    }
}

还有HTML。

<div class="item">
    <img src="/images/myimage.jpg" style="width:100%; height: 100%">

    <div class="carousel-header-container">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Aenean euismod bibendum laoreet...<br>
        </p>
    </div>

    <div class="carousel-content-row">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Aenean euismod bibendum laoreet...<br>
        </p>
    </div>
</div>

<div>
    This is the rest of the page content.
</div>

Answer 1

您将需要使用position: absolute来实现桌面所需的功能。

将.carousel-header-container下的样式更改为position: absolute，然后使用top属性进行调整，以适应所需的内容。

此外，您无需在两个.carousel-header-container部分下重复具有相同值的属性。您只需要在适用于移动设备的部分下重新定义不同的值。

Answer 2

添加

.item {
     padding: 0;
     margin: 0;
     position: relative;
}

将CSS上的div设置为position: absolute和top样式，以适合您的喜好！

bottom

.item {
    padding: 0;
    margin: 0;
    position: relative;
}

.carousel-header-container { /* Content block 1 */
    position: absolute;
    width: 40%;
    height: auto;
    top: 20%;
    left: 20%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.carousel-content-row { /* Content block 2 */
    position: absolute;
    top: 75%;
    left: 0%;
    width: 100%; 
    height: 8em;
}

注意：我省略了您的媒体查询部分，因为这会影响小提琴。

出于您的目的，应包括它。

<div class="item">
    <img src="https://dummyimage.com/50x50" style="width:100%; height: 100%">

    <div class="carousel-header-container">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Aenean euismod bibendum laoreet...<br>
        </p>
    </div>

    <div class="carousel-content-row">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Aenean euismod bibendum laoreet...<br>
        </p>
    </div>
</div>

<div>
    This is the rest of the page content.
</div>

具有多个元素的响应式标题滑块

2 个答案: