阻止文本环绕图像

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

- user4100421

---

不确定您的意思。您在图像上使用了 float: left;，这正是它的作用——让文本环绕它。您究竟想要实现什么？ - trnelson

@TylerH http://jsfiddle.net/9rxtv9m9/5/ 这就是当我不使用浮动时会发生的情况。我希望文本在图像的右侧。 - user4100421

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

- George

---

HTML5带来了一些更适合的新元素。对于img及其文本，如何使用article或figure，并将该文本包装在p中。这就是它的作用。strong在这里绝对没有意义，特别是当你将一个div放在其中时。 - powerbuoy

Answer 2

将您的图片放在一个包装DIV中，并清除它。

CSS：

.wrapper{
    clear:both;
}

HTML：

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

这是JsFiddle链接

或者，直接移除所有CSS，并在图片后加上"<br>"：

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

JsFiddle here

- patrick

Answer 3

使用html输入以下代码：

<br clear="left">

我在多个WordPress网站上使用这个方法，效果良好。

-Callahan-

- Harold Callahan

Answer 4

作为一般规则，以下是一些提高CSS和HTML技能的最佳实践：

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

2）一般而言，尽可能地将内容（HTML）和样式（CSS）分开。

3）要理解CSS的工作原理，您必须学习盒模型。这里有一篇优秀的文章可以帮助您入门：http://css-tricks.com/the-css-box-model/

这个盒模型将帮助您解决问题。

- Pipo

Answer 5

使用WordPress插件

在文本编辑器中插入[clearboth]（不会被可视化编辑器删除），方法如下：

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

- SwiftArchitect