容器中图像右侧的文本(多个图像)

Question

>im 制作一个包含 3 个图像和 3 个"文本位"的容器

我的问题是我似乎无法让文本出现在每个图像的右侧。这里有一个SS：https://i.stack.imgur.com/LjcGg.jpg

该网页：

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

和 CSS：

.textandimage{
clear:both;
}
.image{
float:left;
width: 100%;
margin-left: 10px;
}
.text{
float:left;
}

如果我把：

.text{
 float:right;
 }

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

感谢任何帮助。谢谢。

Answer 1

如果你的div image类已经设置width: 100%它需要宽度的 100%。因此，您可以将其删除或设置为"px"中的值。

Answer 2

删除所有CSS，然后把这个：

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

您想要的只是将图像float到文本divs左侧，所以这就是您所需要的。

http://jsfiddle.net/M8CQD/

编辑：从您的评论来看，您还需要将每个image和textdiv放在一个div中，以便将images推到上图下方。

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