应该很简单,我在这里已经阅读了足够多的帖子,所以应该很简单。所以,当然不是。
我只是想在文本右边浮动文字。一直在尝试使用我的位置,显示方式和浮动方式。全部无济于事。
如果您查看https://staging.hellodadventures.com并向下滚动到显示“ DadVentures Deal”的位置,大约在页面中间,您会看到它。
这是我的代码,首先是HTML:
.dadventures-deal img {
position: relative;
float: left;
z-index: 251;
}
.dadventures-deal h3 {
position: relative;
float: left;
background: #FFF;
color: #F00;
font-family: 'Libre Baskerville', serif;
font-weight: 700;
font-size: 16px;
top: 12px;
padding: 8px 14px;
z-index: 250;
}
<div class="row-deals">
<a href="https://staging.hellodadventures.com/event/santa-monica-pier-aquarium/" title="Santa Monica Pier Aquarium">
<div class="feature">
<figure class="fixedratio" style="background: url('https://staging.hellodadventures.com/wp-content/uploads/2019/03/healthebay-aquarium-e1551648109222.jpg');"></figure>
<div class="feature-bottom">
<h2>Santa Monica Pier Aquarium </h2>
<div class="dadventures-deal"><img src="https://staging.hellodadventures.com/wp-content/themes/dadvation/img/symbol-dadventures.png" alt="DadVentures Deals">
<h3>DadVentures Deal</h3>
</div>
</div>
</div>
</a>
</div>
再次,应该很简单,但是那讨厌的CSS .....
答案 0 :(得分:0)
将clear: none;
添加到您的h3标签
答案 1 :(得分:0)
在h3上添加display:inline-block和clear:none或clear:right 将display:block添加到img