好的,所以我目前正在构建一个定制的WordPress主题,我只是有一个时刻,我的大脑是完全空白的……就像我知道,但我就是搞不明白!
基本上我有一个聚光灯部分,其中有一个图像,然后在该图像的底部显示标题和简短的描述等容器…查看屏幕截图:http://prntscr.com/ksh0tf
基本上我已经做了img与样式它(设置高度/宽度,对象适合等),然后我已经做了容器div保存内容,作为一个位置:绝对,并放置一个底部:0-(在这种情况下,底部: 4px,因为它是一个微小的错位),因为我希望它在图像的底部,无论盒子的高度等。在黑色容器上,我有一个宽度: 100%设置,正如你所看到的,它导致它重叠到其他div上。这也是基于bootstrap构建的,所以它是一个col sm-8和col sm-4,但是看起来文本容器div不想只适合图像的长度,等等。
下面是我的HTML代码:
<?php if ($atts['spotlightcolour'] == 'black' ) : ?>
<div class="spotlight-container">
<img class="spotlight" src="<?php echo $atts['bgimage']['data']['icon']; ?>" />
<div class="spotlight-box" style="background-color: rgba(0, 0, 0, 0.3);">
<?php echo $atts['title']; ?>
<br />
<?php echo $atts['description']; ?>
</div>
</div>
<?php endif; ?>
CSS:
img.spotlight{
height: 256px;
width: 100%;
object-fit: cover;
position: relative;
z-index: 1;
}
.spotlight-box{
position: absolute;
width: 100%;
bottom: 4px;
z-index: 3;
display: block;
color: #fff;
padding: 20px;
}
我只想有内容的容器div,当宽度: 100%设置为100%时,横跨图像的长度,因为这些都可能是不同的大小,所以我不想给出设置的宽度等。
提前感谢您的帮助!
发布于 2018-09-10 08:34:06
由于.spotlight-box
是绝对定位的,如果您想让它正确地位于父对象内部,那么它的父对象需要相对定位:
.spotlight-container {
position: relative;
}
https://stackoverflow.com/questions/52248939
复制相似问题