图像旁边有多行文字(CSS-HTML)

Question

我试图在图像旁边放两行文字,有点像这样

_________
|       | Line one of text
| image |
|       | Line two of text
---------

这是我到目前为止的代码

<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;
 }

但目前它这样做:

_________
|       | Line one of text
| image |
|       | 
---------
Line two of text

我已经浏览了整个网络,但无法弄清楚如何做到这一点,任何帮助都会非常受欢迎.

Answer 1

有因为没有这样的事情float: center;您可以选择left,right或none.

http://jsfiddle.net/vd7X8/1/

如果您float: left;在图像上,它将完成您所追求的目标.

如果你想让它居中,那么你将不得不将图像和文本包装在容器中,修复容器的宽度并margin: 0 auto;对其进行操作,然后继续让图像浮动 - 除非它受到约束包装.

Answer 2

这是一个使用 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>

Answer 3

这是我的演示，其中有使用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>

希望有帮助