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

【问题标题】：text on right side of image in container (multiple images)容器中图像右侧的文本（多个图像）
【发布时间】：2013-11-30 04:38:38
【问题描述】：

我正在制作一个包含 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;
 }

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

感谢任何帮助。谢谢。

【问题讨论】：

标签： html css image text css-float

【解决方案1】：

删除所有的 CSS 并把这个：

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

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

http://jsfiddle.net/M8CQD/

编辑：从您的评论看来，您还需要将每个 image 和 text div 放在一个 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>

【讨论】：

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

【解决方案2】：

如果您的具有image 类的 div 已设置为width: 100%，则它占用 100% 的宽度。因此，您可以将其删除或设置为“px”中的值。

【讨论】：