左浮动图片下方文字排版

Question

我已经成功地将一张图片放在了左侧，就像这样：

<div class="Carl1">
<a href="https://rads.stackoverflow.com/amzn/click/com/1940412145" rel="nofollow noreferrer" target="_blank"><img class="image-left" src="http://caribeauchamp.com/wp-content/uploads/2015/04/first-time-final-cover.jpg" alt="My First Time in Hollywood" />
<span><strong>Amazon</strong></span>
</a>
</div>

还有CSS：

.Carl1 {
text-align: left;
}
.image-left {
    float: left;
    margin: 15px 20px 10px 0px;
    border: solid 4px #fff;

}

然而，当我想让文本出现在图像下方时，我的文本出现在图像的右上角。我做错了什么？

- Carl

---

这种类型的问题，我们建议提供一个JSFiddle链接。这样可以让我们看到问题，使用浏览器的调试工具，分叉它，并将解决方案分享回给您。 - Alan H.

Answer 1

需要清除float浮动。此外，您使用了span元素，默认情况下该元素是内联元素，您需要将span元素设置为块级元素。

这里是一个JSfiddle链接。

DEMO

HTML：

<div class="Carl1">
<a href="http://rads.stackoverflow.com/amzn/click/1940412145" target="_blank">
    <img width="100" class="image-left" src="http://caribeauchamp.com/wp-content/uploads/2015/04/first-time-final-cover.jpg" alt="My First Time in Hollywood" />

<span class="title"><strong>Amazon</strong></span>
</a>
</div>

CSS:

.Carl1 {
text-align: left;
}
.image-left {
    float: left;
    margin: 15px 20px 10px 0px;
    border: solid 4px #fff;
}

.title {
    clear: left;
    display:block;
}

- Wlada

Answer 2

你的问题表明你还没有完全弄清楚浮动是怎么工作的。这里的答案能够解决你今天的问题，但我建议你学习更多关于CSS定位的知识。 这是一个非常好的和经典的主题教程，虽然有点老，但是内容很好。我保证你之后处理CSS会更加容易。

另外，我建议你不要单独浮动这个图片；相反，将整个容器（.Carl1）浮动并给它一个width。

与本页上的其他答案相比，这个解决方案更接近于用代码表达你的意图。我假设你认为整个Carl1 div 实际上是一个对象，其内容应该一起显示。将它们作为一个整体进行浮动是符合这个意图的 :)

- Alan H.

---

这是对我有效的方法，只需删除float属性即可。 - MicroMachine

Answer 3

浮动需要清除，否则文本将尝试环绕图像。

.Carl1 span{display:block;clear:both;}

- sjm

---

这种情况下这会起作用，但是这个CSS非常脆弱和反直觉，因为它将内联元素转换为块，并且如果作者决定span实际上应该是一个<p>，那么它就不起作用了。我宁愿看到创建一个新类，或者整个容器浮动（带有固定宽度）。容器应包括文本和图像，两者都不需要再浮动或清除。 - Alan H.

是的，那是真的，但这超出了这个问题的范围。 - sjm