图像上方文字的最佳解决方案

时间:2019-01-24 03:07:59

标签: html css position

我要添加以下元素。 enter image description here

基本上是页面布局顶部的图像,然后是该图像顶部的框,其中包含标题和更多文本。 但是,就响应能力而言,最理想的方法是什么。我想像下面的标记

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
    <div id="item1" class="content">
        <div class="left-container"><h1>Title 1</h1></div>
        <div class="right-container">
            <div class="offer-container" data-offer-code="Code001" data-selected-bed-code="BB" data-upgrade-bed-code="BB">
                <h2>Offer Title</h2>
                <a class="button" href="javascript:void(0);" onClick="bookNow(this)">Book Now</a>
            </div>
            <div class="offer-container" data-offer-code="Code002" data-selected-bed-code="EEE" data-upgrade-bed-code="FFF">
                <h2>Offer Title</h2>
                <a class="button" href="javascript:void(0);" onClick="bookNow(this)">Book Now</a>
            </div>
        </div>
    </div>
    <div id="item2" class="content">
        <div class="left-container"><h1>Title 2</h1></div>
        <div class="right-container">
            <div class="offer-container" data-offer-code="Code001" data-selected-bed-code="BB" data-upgrade-bed-code="CC">
                <h2>Offer Title</h2>
                <a class="button" href="javascript:void(0);" onClick="bookNow(this)">Book Now</a>
            </div>
            <div class="offer-container" data-offer-code="Code002" data-selected-bed-code="FFF" data-upgrade-bed-code="GGG">
                <h2>Offer Title</h2>
                <a class="button" href="javascript:void(0);" onClick="bookNow(this)">Book Now</a>
            </div>
        </div>
    </div>
</div>

然后将.header设置为相对位置,将img设置为最大宽度的100%,将.text设置为绝对位置,底部:-50%,左侧:10%,依此类推。 但这并不能很好地扩展,在我看来,绝对位置在响应能力方面有点无效。另外,在text元素中,元素下方有内容,该内容应根据文本量移动。如果绝对定位,则管理起来会更加棘手。

对其他方法有什么想法吗?

1 个答案:

答案 0 :(得分:0)

尝试this

img {
    border: 2px solid black;   
}

#container {
    position: relative;    
}

#example {
   position: absolute;
   top: 10px;
   left: 10px; 
    
   padding: 5px;
   background-color: white;
   border: 2px solid red;
}
<div id="container">
    <img src="http://i34.tinypic.com/4tlkci.jpg">
    <div id="example">This is my div</div>
</div>