【问题标题】：Stop text from wrapping around image阻止文本环绕图像
【发布时间】：2014-12-18 02:19:32
【问题描述】：

我想阻止文字环绕图像。不使用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

【问题讨论】：

不确定您的意思。您在图像上有一个float: left;，这正是它所做的——让文本环绕它。你到底想完成什么？
@TylerH jsfiddle.net/9rxtv9m9/5 当我不使用浮点数时会发生这种情况。我希望文本位于图像的右侧

标签： html css margin

【解决方案1】：

使用html输入以下代码：

这适用于我使用多个 WordPress 网站。

-卡拉汉-

【讨论】：

【解决方案2】：

使用 WordPress 插件

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

ClearBoth插件或
Simple Breaks 插件。

【讨论】：

【解决方案3】：

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

由于您的<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

【讨论】：

HTML5 带来了一些更适合这里的不错的新元素。对于img 及其文本，article 或figure 怎么样，然后将该文本包装在p 中。这就是它的用途。 strong 在这里绝对是零意义，尤其是当您将 div 放入其中时。

【解决方案4】：

将您的 img 放入包装器 DIV 并清除它

CSS：

.wrapper{
    clear:both;
}

HTML：

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

Here's the JsFiddle

或者，只需删除所有 CSS 并在图片后添加“
”：

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

JsFiddle here

【讨论】：

【解决方案5】：

作为一般规则，这里有一些提高您的 css 和 html 技能的最佳实践：

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

2) 作为一般规则，尽可能将您的内容 (html) 和样式 (css) 分开。

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

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

【讨论】：