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
Stop text from wrapping around image
提问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.
回答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: hidden
on 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>
回答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...
Or, simply remove all CSS and put "<br>" after the image:
或者,只需删除所有 CSS 并在图像后放置“<br>”:
<img src="..."><br>
回答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]
在文本编辑器中插入(不会被可视化编辑器删除):
- ClearBothplugin or
- Simple Breaksplugin.