Question

好吧，所以我目前正在构建一个定制的WordPress主题，而我只是脑海中完全空白的那一刻...好像我知道但我只是想不通！

基本上，我有一个Spotlight区域，其中有一个图像，然后在该图像的底部有一个容器，用于显示标题和简短说明等...请参见屏幕截图：http://prntscr.com/ksh0tf

基本上，我已经完成了img的样式设置（设置高度/宽度，对象适合度等），然后完成了保存内容的容器div，其位置为：绝对，底部为：0- （在这种情况下，底部为：4px，因为它有点不合适），无论盒子的高度如何，每次都希望它位于图像的底部。在黑色容器上，我有一个宽度：设置为100％，如您所见，这导致它与另一个div重叠。这也是基于引导程序构建的，因此它是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在width：设置为100％时位于图像的长度上，因为这些尺寸可能都不同，所以我不想设置宽度等。

在此先感谢您的帮助！

Answer 1

由于def findDistance(CH, CA): return CH / math.cos(CA) #for test cameraHight = 1.2 #In meter cameraAngle = 65 #Degress angle estimatedDistance = findDistance(cameraHight, cameraAngle) print(estimatedDistance)的位置是绝对的，因此如果您希望它的父级正确放置在父级中，则其父级必须相对定位：

.spotlight-box

提琴：http://jsfiddle.net/ctdu9bzk/4/

停止div与容器重叠

1 个答案: