html - 如何在图像旁边 float 多个段落

所以...我是编码新手，我已经为以下问题苦苦挣扎了好几天。

我想在图片旁边多行文本。但是，尝试使用float参数来实现这一点失败了，因为应该在图像旁边的文本包含多个段落。

为了显示：

我希望我的文字和“ ^”看起来像这样：
Desired situation

但是用我的代码（见下文），我只能做到这一点：
enter image description here

因此，我似乎无法在图像旁边获取我的文本-应该是三行不同的文本。

这是我到目前为止的工作：

CSS：

.grey{
   background-color: #f9f9f9;
   height: 100%;
   border-style: solid;
   border-width: 1px;
   border-color: #d9d9d9;
   border-left: 0;
   border-right: 0;
   clear: both;
}

.titel{
   font-size: 24px;
   font-weight: normal;
   font-family: "Roboto Slab", Georgia, serif;
   color: #19232d;
   float: left;
}

.datum{
   font-size: 14px;
   padding: 11px 0 0 0;
   font-family: "Open Sans", Arial, sans-serif;
   color: #d9d9d9;
   text-transform: uppercase;
   float:left;
}

.link{
   font: 21px;
   padding: 11px 0 0 0;
   font-weight: normal;
   font-family: "Roboto Slab", Georgia, serif;
   color: #19232d;
   float: right;
   text-align: right;
}

.naamspeler{
   font-family: "Open Sans", Arial, sans-serif;
   color: #d9d9d9;
   float: right;
}

.afbeeldingspeler{
   float: right;
   padding: 10px 10px 10px 0;
   max-width: 100%;
   height: auto;
}

.huidigeranking{
   font-family: "Open Sans", Arial, sans-serif;
   color: black;
   float: right;
   font-size: 2em;
}

.rankingup{
   color: green;
   float: right;
   font-size: 2em;
}

.rankingdown{
   color: red;
   float: right;
   font-size: 2em;
}

HTML（是Wordpress，因此是[columns]）：

<div class="titel">Op de ladder</div>
<div class="datum">   &nbsp;&nbsp;&nbsp;&nbsp;5 december 2015</div>
<div class="link"><a href="/opdeladder">Meer rankings ></a></div>

<div class="grey">

[columns]

[column size="1/3"]
<span class="afbeeldingspeler"> <img src="http://tennisplaza.be/beta/wp-content/uploads/2015/12/David-Goffin.jpg" width=93px /></span>
<span class="rankingup"><i class="fa fa-angle-double-up fa-4x"></i></span>
<span class="huidigeranking">16</span>
<span class="naamspeler">+4</span>
<span class="naamspeler">David GOFFIN</span>
[/column]

[column size="1/3"]<span class="afbeeldingspeler"> <img src="http://tennisplaza.be/beta/wp-content/uploads/2015/12/Yanina-Wickmayer.jpg" width=93px /></span>
<span class="rankingup"><i class="fa fa-angle-up fa-4x"></i></span>
<span class="huidigeranking">44</span>
<span class="naamspeler">+4</span>
<span class="naamspeler">Yanina WICKMAYER</span>
[/column]

[column size="1/3"]<span class="afbeeldingspeler"> <img src="http://tennisplaza.be/beta/wp-content/uploads/2015/12/Niels-Desein.jpg" width=93px /></span>
<span class="rankingdown"><i class="fa fa-angle-down fa-4x"></i></span>
<span class="huidigeranking">250</span>
<span class="naamspeler">-20</span>
<span class="naamspeler">Niels DESEIN</span>
[/column]

[/columns]

</div>

此外，在移动设备上，这似乎根本不起作用。在那里，似乎没有CSS可以正常工作（没有颜色，没有不同的字体大小，没有浮动）...

是否有人对如何解决此问题有任何想法？

最佳答案

您是否可以将列内容包装在div或span中？如果可以的话，它将允许您使用text-alignment：right并将跨度向右浮动。现在，似乎没有任何跨度或div将跨度绑定到一个块中。

关于html - 如何在图像旁边 float 多个段落，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34188992/