Html 阻止文本环绕图像

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26510738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:55:42  来源:igfitidea点击:

Stop text from wrapping around image

htmlcssmargin

提问by user4100421

I want to stop text from wrapping around image. Is there any way to do this without using margin?

我想阻止文本环绕图像。有没有办法在不使用的情况下做到这一点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

JSFiddle 演示

回答by George

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

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

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

由于您<img>的浮动到左侧,您可以overflow: hidden在新添加的容器上使用以实现文本不换行。

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

然而块元素不应该是<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

JSFiddle

回答by patrick

Put your img in a wrapper DIV and clear that

将你的 img 放在一个包装 DIV 中并清除它

CSS:

CSS:

.wrapper{
    clear:both;
}

HTML:

HTML:

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

Here's the JsFiddle

这是 JsFiddle

Or, simply remove all CSS and put "<br>" after the image:

或者,只需删除所有 CSS 并在图像后放置“<br>”:

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

JsFiddle here

JsFiddle在这里

回答by Pipo

As a general rule here are some best practices to improve your css and html skills:

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

1) Always separate images and textsin the corresponding tags: <img src="">for images and <p>or <div>or <span>for texts.

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

2) As a general rule, separate your content (html) and your style (css) as much as possible.

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

3) To understand how CSS works you have to learn the box model. Here is an excellent article to get you going: http://css-tricks.com/the-css-box-model/

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

This box model will help you with your problem.

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

回答by SwiftArchitect

Using a WordPress plugin

使用 WordPress 插件

Insert [clearboth]in the Texteditor (won't be removed by the Visualeditor) with:

[clearboth]文本编辑器中插入(不会被可视化编辑器删除):

  1. ClearBothplugin or
  2. Simple Breaksplugin.
  1. ClearBoth插件或
  2. 简单的休息插件。