css - 响应式 2 列 2 行布局

Question

我一直在尝试弄清楚如何创建此布局，我有一个 2 列布局，左列有 1 行，右侧有 2 行。我试图让它流畅地调整。我遇到的问题是我希望右侧顶部图像的顶部与左侧图像的顶部对齐，而底部图像的底部与左侧图像的底部保持对齐。我应该使用表格吗？

这是我目前所知道的......不是很接近我真的很感谢你的帮助。

http://jsfiddle.net/#&togetherjs=TpsEptHKit

这是我想要完成的图像

Answer 1

我能想到的最接近的是一个只有一行和两个单元格的表格(所以两边的高度相等)。

然后在右侧，我们有两个 div，高度加起来为 100%(例如，顶部为 60%，底部为 40%)。

我们将为上面的 block 指定 vertical-align: top，为下面的 block 指定 vertical-align: bottom。在顶部，这会产生预期的效果，但在底部，垂直对齐不会正确启动，因为我们只有一个元素要对齐。为了解决这个问题，我们需要一个高度为 100% 的 spanner 元素，并将其放置在“真实” block 的旁边。

在这里，.block 表示单元格内的内容，例如图片和标题。

JSFiddle

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;
}