将文本放置在浮动在左侧的图像下
将文本放置在浮动在左侧的图像下
提问于 2015-08-06 08:59:28
我已经成功地在左侧放置了一个图像，如下所示：
<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;
}但是，当我希望文本显示在图像下方时，它会显示在图像的右上角。我做错了什么？
回答 2
Stack Overflow用户
发布于 2015-08-06 09:04:28
需要清除浮动，否则文本将尝试环绕图像
.Carl1 span{display:block;clear:both;}Stack Overflow用户
发布于 2015-08-06 09:25:28
你的问题表明你还没有完全弄清楚浮动是如何工作的。这里的答案将解决您今天的问题，但我建议您学习更多关于CSS定位的知识。
Here is a really great and classic tutorial on the subject。它很老了，但它是好东西。我保证，以后你使用CSS会轻松很多。
另外，我特别建议您不要让这个图像本身浮动；相反，让整个容器(.Carl1)浮动并给它一个width。
与本页上的其他答案相比，此解决方案更接近于用代码表达您的意图。我假设您认为整个Carl1 div本质上是一个对象，其内容应该一起出现。将它们作为一个整体浮动是符合这一意图的:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31845165
复制相关文章
相似问题
腾讯云开发者
