html - 阻止文本环绕图像

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在您新添加的容器上实现文本不换行。

但是 block 元素不应该是 <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