假设我有以下HTML(好吧,haml,但是......):
.container
.row
.span4
%h1
%p
%img
.span4
%h1
%p
%img
.span4
%h1
%p
%img
因此,每列都有一个标题,一些文本和一个图像。有没有办法让图像垂直对齐,就像这样做:
.container
.row
.span4
%h1
%p
.span4
%h1
%p
.span4
%h1
%p
.row
.span4
%img
.span4
%img
.span4
%img
但没有创建新行?原因是,我希望将图像与标题和文本分组,这样在移动/平板电脑布局上,图像的布局与它们匹配的内容相同,而在第二种情况下,您将得到三个文本组,然后是三个图像。
答案 0 :(得分:5)
我可以想到两种方法:
在任何情况下,在某些情况下可能不需要img-outer
。
<div class="container">
<div class="row">
<div class="span4">
<h1></h1>
<p></p>
<div class="img-outer"><img src="" /></div>
</div>
<!-- ... -->
</div>
</div>
如果为上面的文本元素 h1
和p
设置固定高度,那么您的图片将会对齐。
您还可以为.span
设置固定高度并使用绝对定位。这个如下所示:
.container .row [class*="span"] {
height: 100px;
padding-bottom: 150px;
position: relative;
}
.container .row [class*="span"] .img-outer{
height: 150px;
line-height: 150px;
vertical-align: middle;
position: absolute;
bottom: 0;
/* Take the whole width */
left: 0;
right: 0;
}
似乎工作,我没有足够的绝对定位知识来保证结果是跨浏览器。
.container .row {
padding-bottom: 150px;
position: relative;
}
.container .row [class*="span"] .img-outer{
height: 150px;
line-height: 150px;
vertical-align: middle;
position: absolute;
bottom: 0;
/* Take the whole width */
width: 300px; /* .span4 width */
}