Css 响应式2列2行布局

我一直在试图找出如何创建这个布局，我有一个2列布局，左侧有1行，右侧有2行。我试着让它流畅地调整。我遇到的问题是，我希望右侧的顶部图像的顶部与左侧图像的顶部对齐，而底部图像的底部与左侧图像的底部保持对齐。我应该用桌子吗

这是我到目前为止得到的。。不是很近，我真的很感谢你的帮助

---

这是我想完成的一张图片

我能想到的最接近的是一张有一行和两个单元格的桌子（因此两边的高度相等）

然后在右边我们有两个

div

s，高度加起来为100%（比如说，顶部为60%，底部为40%）

我们将为上部块指定

vertical align:top

，为下部块指定

vertical align:bottom

。在顶部，这将产生所需的效果，但在底部，垂直对齐不能正确启动，因为我们只有一个元素要对齐。为了解决这个问题，我们需要一个100%高度的扳手元件，并将其放置在“真实”块附近

在这里，

.block

表示单元格内的内容，例如图像和标题

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>

这是小提琴：

打印的列克星敦

打印的列克星敦

打印的列克星敦

您可以通过以vw或%表示宽度，使其具有响应性

编辑：这里有一个响应迅速的更新提琴：

---

编辑2：请注意，第一列的高度可能会有所不同-无论高度是多少，其余的div都会相应缩放。这里还有一个不同的左栏高度的问题：

你可以做的是首先把整个东西包装在一个容器中，而不是给你的

。right:{float:right}

，然后删除其他类中的

float:left

。参见代码

.container{
    width: 620px;
    height: 400px;
}

.right {
    float: right;
}

.blackBox {
    background-color: black;
    width: 200px;
    height: 175px;  
}

.redBox {
    background-color: red;
    width: 400px;
    height: 400px;
}

---

这看起来与您的图片相同：

如果任何答案解决了您的问题，请接受相关答案。很多人把时间花在解决方案上。不，不，不！表是用于数据，而不是其他。您应该使用CSS表布局实现同样的功能，即使在IE8中也支持CSS表布局。

<div id="left-container">
<div id="left" class="black"></div>
<p class="description-text-left">Printed Lexington</p>
</div>
<div id="right">
<div id="right-top" class="black"></div>
    <p class="description-text">Printed Lexington</p>

<div id="right-bottom" class="black"></div>
<p class="description-text">Printed Lexington</p>
</div>

.container{
    width: 620px;
    height: 400px;
}

.right {
    float: right;
}

.blackBox {
    background-color: black;
    width: 200px;
    height: 175px;  
}

.redBox {
    background-color: red;
    width: 400px;
    height: 400px;
}