我一直在试图弄清楚如何创建这个布局,我有一个 2 列布局,左列有 1 行,右侧有 2 行。我试图让它流畅地调整。我遇到的问题是,我希望右侧顶部图像的顶部与左侧图像的顶部对齐,而底部图像的底部与左侧图像的底部保持对齐。我应该使用桌子吗?
这是我到目前为止所拥有的..不是很接近我真的很感谢您的帮助。
here is an image of what I would like to acomplish
我能想到的最接近的是一个具有单行和两个单元格的表格(因此两侧的高度相等)。
然后在右边我们有两个div
高度加起来为 100%(例如,顶部为 60%,底部为 40%)。
我们将指定vertical-align: top
对于上块,以及vertical-align: bottom
对于较低的一个。在顶部,这将产生所需的效果,但在底部,垂直对齐无法正确启动,因为我们只有一个元素要对齐。为了解决这个问题,我们需要一个高度为 100% 的扳手元素,并将其放置在“真实”块的附近。
Here, .block
代表单元格内的内容,例如图像和标题。
JSFiddle http://jsfiddle.net/2b9n4/1/
HTML
<table class="container">
<tr>
<td class="left">
</td>
<td class="right">
<div class="top">
<div class="block"></div>
</div>
<div class="bottom">
<div class="filler"></div><div class="block"></div>
</div>
</td>
</tr>
</table>
CSS
.container {
width: 100%;
height: 100%;
}
.left {
width: 60%;
height: 200px;
}
.right {
height: 100%;
}
.right .top {
height: 60%;
width: 100%;
vertical-align: top;
}
.right .bottom {
height: 40%;
width: 100%;
vertical-align: bottom;
}
.block {
display: inline-block;
}
.filler {
height: 100%;
display: inline-block;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)