CSS：无法让文本浮动到我的图像右侧答案

【问题标题】：CSS: Can't get text to float to the right of my imageCSS：无法让文本浮动到我的图像右侧
【发布时间】：2019-08-21 10:23:20
【问题描述】：

应该很简单，我已经阅读了足够多的帖子，这应该是一个简单的过程。所以当然不是……

我只是想将文本浮动到图像的右侧。一直在尝试对我的位置、显示和浮动进行不同的策略。一切都无济于事。

如果您查看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 .....

【问题讨论】：

使用 display:flex 代替浮动
如果你不想使用 flex，我更新了我的答案

标签： html css image css-float

【解决方案1】：

将clear: none; 添加到您的 h3 标签中

【讨论】：

【解决方案2】：

将 display:inline-block 和 clear:none 或 clear:right 添加到 h3 将 display:block 添加到 img

【讨论】：

h3 不需要仅浮动 float:left to the image 就足够了，但无论哪种方式都可以：)
谢谢！真的很好用。没有想到清楚：不知道，但它确实有效！