阻止文字环绕图像 [英] Stop text from wrapping around image

问题描述

我想阻止文本环绕图像.有没有办法不用margin来做到这一点?

I want to stop text from wrapping around image. Is there any way to do this without using 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演示

JSFiddle Demo

推荐答案

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

You'll have to wrap your text in its own container.

由于<img>浮动在左侧，因此可以在新添加的容器上使用overflow: hidden来实现文本不换行.

Since your <img> is floated to the left, you can use overflow: hidden on your newly-added container to achieve no wrapping of the text.

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

However block elements shouldn't be descendants of <strong> elements, you may want to rethink this tag.

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

这篇关于阻止文字环绕图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！