Question

我正在使我的商店响应。我试图保持绝对位于图像上方的div的完整性。我已经搜索了一种方法来保持div的高度相对于图像的高度，但所有解决方案似乎都依赖于div没有绝对定位，它必须位于图像的顶部。无论我做什么，问题是保持div底部和图像底部之间的明显距离。如果浏览器窗口缩小，则div会突出显示图像。

代码：

<div class="relative">
    <img src="http://cdn.shopify.com/s/files/1/0200/9900/t/6/assets/header-tiny-lr.jpg?20879">
    <div class="collection-header-wrap">
            <div class="collection-description">
                <h2>Teeny-Tiny Fun</h2>
                <p>Cuteness abounds in our collection of tiny stickers, which are great for decorating documents or belongings.</p>
                <p>Bring some fun to home or office with a few sheets of kawaii mini-stickers. These stickers might be small, but they're guaranteed deliver big smiles.</p> 
            </div>
    </div>  
</div>


.relative {
   max-width: 740px;
   position: relative;
}

img {
   width: 100%;
}

.collection-description {
   position: absolute;
   top: 10px;
   left: 10px;
   width: 25.675675675676%; /* 190/740 */
   height: 160px;
   background-color: rgba(255,255,255, 0.7);
   padding: 10px;
   font-size: 12px;
   line-height: 1;
}

这是一个相同的代码：http://codepen.io/anon/pen/ctdbv

由于

响应div在图像上方

0 个答案: