Question

我正在制作一个包含3个图像和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

删除所有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>

Answer 2

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

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

2 个答案: