容器图片右侧文字(多张图片)
容器图片右侧文字(多张图片)
提问于 2013-11-17 05:08:49
我正在制作一个包含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;
}文本显示在右侧。但它仍然与图片保持一致。我希望文本是并排的。
感谢任何人的帮助。谢谢。
回答 2
Stack Overflow用户
发布于 2013-11-17 05:11:47
删除所有CSS，只需添加以下内容：
.image{
float: left;
margin-left: 10px;
}您所需要的只是对文本divs左侧的图像执行float操作，所以这就是您所需要的。
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>Stack Overflow用户
发布于 2013-11-17 05:12:47
如果您的带有image的div类设置了width: 100%，那么它将采用100%的宽度。因此，您可以删除它或将其设置为"px“中的值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20023904
复制相关文章
相似问题
腾讯云开发者
