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

Question

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

我的问题是我似乎无法让文本出现在每张图片的右侧。 这里有一个 SS:http://imgur.com/ujBIjYC

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>

和CSS:

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

如果我输入:

.text{
 float:right;
 }

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

感谢任何帮助。谢谢。

Answer 1

如果您的带有 image 类的 div 设置了 width: 100% 它会占用 100% 的宽度。因此，您可以将其删除或设置为以“px”为单位的值。