html - CSS:无法让文本浮动到我的图像右侧
问题描述
应该很简单,我已经在这里阅读了足够多的帖子,这应该很容易。所以当然不是......
我只是想将文本浮动到图像的右侧。一直在尝试对我的位置、显示和浮动进行不同的策略。一切都无济于事。
如果您查看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 ......
解决方案
添加clear: none;
到您的 h3 标签
推荐阅读
- java - 如何像在 Eclipse 中一样在 Intellij 的码头上运行 maven 项目?
- matlab - 循环中的 Simulink 模型
- ssl - Go 中 Python 的 create_default_context() 等价物?
- mongodb - 我们如何在 MongoDB 上创建索引?
- vb.net - 我可以将变量 ByRef 传递给 vb.net 中的计时器事件吗?
- kendo-ui - 单击图例时,剑道图表会更改宽度
- java - 比较两个 int 数组并打印缺失的数字
- java - 检查 .java 文件中打开的大括号数
- scala - 如何有效地在两个数据帧之间进行余弦相似度
- google-drive-api - 节点中的文件未返回 googleapis“appProperties”字段