图像旁边的多行文本 (CSS-HTML)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20391156/
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
Multiple lines of text next to image (CSS-HTML)
提问by OstlerDev
I am trying to put 2 lines of text next to an image, sort of like this
我正在尝试在图像旁边放置 2 行文本，有点像这样
_________
| | Line one of text
| image |
| | Line two of text
---------
This is the code that I have so far
这是我到目前为止的代码
<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span></p>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
.banner img {
float: center;
margin: 5px;
}
.banner span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
.banner .ban2 span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
But currently it does this:
但目前它这样做：
_________
| | Line one of text
| image |
| |
---------
Line two of text
I have looked all over the web but have not been able to figure out how to do this, any help would be very welcome.
我已经浏览了整个网络，但无法弄清楚如何做到这一点，非常欢迎任何帮助。
采纳答案by Ming
There's no such thing as float: center;You can choose either left, right, or none.
有因为没有这样的事情float: center;您可以选择left，right或none。
If you float: left;on the image it will do what you're after.
如果你float: left;在图像上，它会做你所追求的。
If you want it centered, then you're going to have to wrap the image and the text in a container, fix the width of the container and do margin: 0 auto;on it, then continue to have your image floated--except it will be constrained by the wrapper.
如果你想让它居中，那么你将不得不将图像和文本包裹在一个容器中，固定容器的宽度并margin: 0 auto;在上面做，然后继续让你的图像浮动——除非它会受到约束包装纸。
回答by mvndaai
Here is a snippet using a svg so you can test it anywhere.
这是一个使用 svg 的片段，因此您可以在任何地方对其进行测试。
.img{
float: left;
margin-right:1rem;
}<div>
<svg class="img" width="50" height="50" >
<rect width="50" height="50" style="fill:black;"/>
</svg>
<p>
Line 1
<br>
Line 2
</p>
</div>回答by Phan Van Linh
Here is my demo which have using floatand overflowwith some explain
这是我的演示，其中有使用float并overflow有一些解释
.div1 {
border: 3px solid #0f0;
overflow:auto; // without overflow here, if the "Line 1" and "Line 2" is short then "Next elements" will display below "Line 2" and the image will cover the "Next elements"
}
.img {
float: left;
width:100px;
height:100px;
background: #000
}
.div2 {
float: left; // without float here, if "Line 1" and "Line 2" is long -> text will display both at right and bottom the image
} <div class="div1">
<img class="img"/>
<div class="div2">
<p> Line 1 </p>
<p> Line 2 </p>
</div>
</div>
<p>Next elements</p>Hope it help
希望有帮助
回答by user3491125
I know this post is old but wrap your element in a divand apply the vertical-align:topto this divand you're done.
我知道这篇文章很旧，但是将您的元素包装在 a 中div并将 应用于vertical-align:top此div，您就完成了。
回答by Asraful Haque
Check it. It is well defined css.
核实。它是定义明确的 css。
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<style>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
img, span {
float:left;
}
.banner img {
float: center;
margin: 5px;
}
[class="ban1"]{
font-size: 17px;
position:relative;
top:50px;
left:11px;
}
[class="ban2"] {
font-size: 17px;
position: relative;
left: -97px;
top: 74px;
}
</style>
</head>
<body>
<div class="banner">
<div class="wrapper">
<p><img src="span.png"><span class="ban1">Line one of text</span>
<span class="ban2">Line 2 of text</span>
</p>
</div>
</div>
</body>
</html>
回答by Ricky Levi
I know this is old post, but still wanted to say that not only floatwill do it, the <img>tag has a built-in attribute called align="left"which does that as well
我知道这是旧帖子，但仍然想说不仅float会这样做，<img>标签还有一个名为的内置属性align="left"，它也可以这样做
<p>
<img src="smiley.gif" align="left"><span>Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span>
</p>
Fiddle: http://jsfiddle.net/356akcoy/
