使用WordPress插件

Question

我想阻止文字环绕图像。有没有办法在不使用margin的情况下执行此操作？

＆＃13;

img {
  margin-bottom: 2.5em;
}

＆＃13;

<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.

＆＃13;

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并将＆＃34;＆lt; br＆gt;＆＃34;在图像之后：

<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

使用WordPress插件

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

ClearBoth插件或
Simple Breaks插件。

Answer 5

使用html输入以下代码：

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

-卡拉汉-

阻止文字环绕图像

5 个答案:

使用WordPress插件