Html 容器中图像右侧的文本（多个图像）

我正在制作一个包含3个图像和3个“文本位”的容器

我的问题是，我似乎无法使文本显示在每个图像的右侧。 下面是一个SS：

html：

        <div class="textandimg">
        <div class="image">
        <a href="#">
        <img src="img/belahotellforside.png" alt="belahotellforside">
        </a>
        </div>
        <div class="text">
        <p>asdfer</p>
        </div>
        <div class="image">
        <a href="#">
        <img src="img/caprocatforside.png" alt="caprocatforside">
        </a>
        </div>
        <div class="text">
        <p>asdfer</p>
        </div>
        <div class="image">
        <a href="#">
        <img src="img/granhotellforside.png" alt="granhotellforside">
        </a>
        </div>
        <div class="text">
        <p>asdfer</p>
        </div>



 </div>

如果我说：

.text{
 float:right;
 }

文本显示在右侧。但它仍然与图片一致。我希望文本并排出现

---

谢谢你的帮助。谢谢

删除所有CSS，然后放上：

.image{
    float: left;
    margin-left: 10px;
}

您所需要的只是将图像浮动到文本的左侧，这就是您所需要的

编辑：从您的评论来看，您似乎还需要将每个

图像

和

文本

div放在一个

div

中，以便将

图像

推到前面图像的下方

<div class='row'>
    <div class="image">
        <a href="#">
            <img src="img/belahotellforside.png" alt="belahotellforside">
        </a>
    </div>
    <div class="text">
        <p>asdfer</p>
    </div>
</div>

阿斯德费尔

如果您的div和

image

类设置了

宽度：100%

则会占用100%的宽度。因此，您可以删除它或将其设置为“px”中的值。

当我只将图像向左浮动时，会发生这种情况：wich真的很奇怪。如果我只是删除文本，只要容器中有空间，图像就会并排水平放置。

<div class='row'>
    <div class="image">
        <a href="#">
            <img src="img/belahotellforside.png" alt="belahotellforside">
        </a>
    </div>
    <div class="text">
        <p>asdfer</p>
    </div>
</div>