图像旁边的多行文本 (CSS-HTML)答案

【问题标题】：Multiple lines of text next to image (CSS-HTML)图像旁边的多行文本 (CSS-HTML)
【发布时间】：2013-12-21 20:55:03
【问题描述】：

我想在一张图片旁边放两行文字，有点像这样

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

我浏览了整个网络，但无法弄清楚如何做到这一点，非常欢迎任何帮助。

【问题讨论】：

标签： html css image alignment

【解决方案1】：

我建议使用效果很好的旧表。就 CSS 而言，只需要添加 vertical-align: top 属性即可。

<table>
  <tbody>
    <tr>
      <td class="img-container">
        <img src="https://img2.gratispng.com/20180324/sbe/kisspng-google-logo-g-suite-google-5ab6f1f0dbc9b7.1299911115219389289003.jpg"/>
      </td>
      <td class="content-container">
        <span class="description">This is a very long text that creates multiple lines with the image at left side</span>
      </td>
    </tr>
  </tbody>
</table>

小提琴：https://jsfiddle.net/fypa0k4w/

【讨论】：

【解决方案2】：

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

希望对你有帮助

【讨论】：

【解决方案3】：

我知道这是旧帖子，但仍然想说不仅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>

小提琴：http://jsfiddle.net/356akcoy/

【讨论】：

【解决方案4】：

这是一个使用 svg 的 sn-p，因此您可以在任何地方对其进行测试。

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

【讨论】：

【解决方案5】：

检查一下。它是定义良好的 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>

【讨论】：

这表示 float: center;这在 css 中是不可能的

【解决方案6】：

我知道这篇文章已经过时，但是将您的元素包装在 div 中并将 vertical-align:top 应用到此 div 上，您就完成了。

【讨论】：

是的，有一些解决方法可能是可用的解决方案。顺便说一句，发帖年龄无关紧要，问答也在这里为其他人提供帮助（面临相同或相似的问题）。

【解决方案7】：

没有float: center; 这样的东西，您可以选择left、right 或none。

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

如果你在图片上float: left;，它会做你想做的事。

如果您希望它居中，那么您将不得不将图像和文本包装在一个容器中，固定容器的宽度并对其执行margin: 0 auto;，然后继续让您的图像浮动--除非它会受到包装器的约束。

【讨论】：

我正在尝试将横幅中的图像和文本居中，如果我让它向左浮动，那么它会一直向左移动而不允许我使其居中。
如果你想让它居中，那么你将不得不将图像和文本包装在一个容器中，固定容器的宽度并对其执行margin: 0 auto;，然后继续您的图像浮动-除非它将受到包装器的约束。看到这个：jsfiddle.net/vd7X8/1（也更新了答案。）