响应式2列2行布局

Question

我一直在尝试创建这种布局，我有一个两列布局，左列有1行，右边有2行。我想让它能够流畅调整。我遇到的问题是，我希望右侧顶部图像的顶部与左侧图像的顶部对齐，而底部图像的底部仍与左侧图像的底部对齐。我应该使用表格吗？

以下是我目前的情况...与预期相差甚远。非常感谢您的帮助。

这是我想要完成的样子：https://istack.dev59.com/BVif7.webp 以下是代码：http://jsfiddle.net/#&togetherjs=TpsEptHKit

- nick

---

如果任何答案解决了您的问题，请接受相关答案。许多人花费了他们的时间来解决这些问题。 - oneday

Answer 1

我能想到的最接近的方法是使用一个只有一行和两个单元格的表格（这样两侧高度就相等）。

然后在右边我们有两个`div`，它们的高度加起来为100%（比如，上面60%，下面40%）。

我们将为上方块指定`vertical-align: top`，并为下方块指定`vertical-align: bottom`。在顶部，这将产生所需的效果，但在底部，垂直对齐无法正确生效，因为我们只有一个要对齐的元素。为了解决这个问题，我们需要一个高度为100%的占位元素，并将其放置在“真实”的块旁边。

这里，`.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;
}

- Albert Xing

---

不，不，不，绝对不可以使用表格来布局，表格只应该用于数据展示。你应该使用 CSS 表格布局来实现相同的效果，这种布局方式甚至在 IE8 中也得到了支持。 - Manngo

Answer 2

这是代码片段链接: http://jsfiddle.net/RGaw5/

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

你可以通过以vw或%的方式给宽度来使其响应。

编辑：这是一个响应式的、更新后的fiddle: http://jsfiddle.net/RGaw5/1/

编辑2：请注意，第一列的高度可能会有所变化——无论高度如何，其他div都会相应缩放。这里还有一个不同左侧列高度的fiddle: http://jsfiddle.net/RGaw5/2/

- oneday

Answer 3

你可以首先将整个内容放入一个容器中，然后给你的.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;
}

这看起来与您的图片相同：http://jsfiddle.net/aC7j6/1/

- yancie