阻止文字环绕图像

Question

我想阻止文字环绕图像。没有使用margin有没有办法做到这一点？

img {
  margin-bottom: 2.5em;
}

<strong><img style="float: left;" src="https://www.google.com/images/srpr/logo11w.png" width="100" height="67" />Text here. Text here. Text here. Text here.
    <br />Text here. Text here. Text here. Text here. Text here. Text here.
    <br />Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.
    <br />Text here. Text here.Text here. Text here.Text here. Text here.

JSFiddle Demo

Answer 1

您必须将文本包装在自己的容器中。

由于您的<img>浮动到左侧，您可以在新添加的容器上使用overflow: hidden来实现文本的包装。

但是块元素不应该是<strong>元素的后代，您可能需要重新考虑此标记。

img {
    width:100px;
    height:67px;
    float:left;
}
div {
    overflow:hidden;
}

<article>
    <img src="https://www.google.com/images/srpr/logo11w.png" />
    <div>
        Text here. Text here. Text here. Text here.<br />
        Text here. Text here. Text here. Text here. Text here. Text here.<br />
        Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.<br />
        Text here. Text here.Text here. Text here.Text here. Text here.
        Text here. Text here. Text here. Text here.<br />
        Text here. Text here. Text here. Text here. Text here. Text here.<br />
        Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.<br />
        Text here. Text here.Text here. Text here.Text here. Text here.
    </div>
</article>

JSFiddle

Answer 2

把你的img放在一个包装DIV中并清除它

CSS：

.wrapper{
    clear:both;
}

HTML：

<div class='wrapper'><img src='..'></div>
text here. text here...

Here's the JsFiddle

或者，只需删除所有CSS并在图像后面加上“<br>”：

<img src="..."><br>

JsFiddle here

Answer 3

作为一般规则，这里有一些提高你的CSS和HTML技能的最佳实践：

1）始终在相应的标签中分隔图像和文本：<img src="">用于图像，<p>或<div>或<span>用于文本。

2）作为一般规则，尽可能地分离你的内容（html）和你的风格（css）。

3）要了解CSS的工作原理，您必须学习盒子模型。这是一篇很棒的文章，可以帮助您：http://css-tricks.com/the-css-box-model/

此框模型将帮助您解决问题。

Answer 4

Using a WordPress plugin

在文本编辑器中插入[clearboth]（不会被Visual编辑器删除）：

1. ClearBoth插件或
2. Simple Breaks插件。