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;

}

但是当我希望它出现在图像下方时，我的文字会显示在图像的右上角。我做错了什么？

Answer 1

浮动需要清除。您还使用了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;
}

Answer 2

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

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

Answer 3

你的问题表明你还没弄清楚花车是如何工作的。这里的答案将解决您今天的问题，但我建议您更多地了解CSS定位。

Here is a really great and classic tutorial on the subject。它已经老了，但这是件好事。我保证，你以后会更容易使用CSS。

另外，我特别建议你不要自己浮动这个图像;相反，浮动整个容器（.Carl1）并给它一个width。

与此页面上的其他答案相比，此解决方案更接近于在代码中表达您的意图。我假设您认为整个Carl1 div基本上是一个对象，其内容应该一起出现。将它们作为一个浮动就符合这一意图：）

将文本放置在左侧浮动的图像下方

3 个答案: