基本上是页面布局顶部的图像,然后是该图像顶部的框,其中包含标题和更多文本。 但是,就响应能力而言,最理想的方法是什么。我想像下面的标记
<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元素中,元素下方有内容,该内容应根据文本量移动。如果绝对定位,则管理起来会更加棘手。
对其他方法有什么想法吗?
答案 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>