响应式 2 列 2 行布局答案

【问题标题】：responsive 2 column 2 row layout响应式 2 列 2 行布局
【发布时间】：2014-07-24 09:41:16
【问题描述】：

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

这是我到目前为止所拥有的......不是很接近我非常感谢帮助。

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

这是我想要完成的图片

【问题讨论】：

如果有任何答案解决了您的问题，请接受相关答案。许多人都花时间研究解决方案。

标签： css html layout responsive-design

【解决方案1】：

我能想到的最接近的是一张单行和两个单元格的表格（所以两边高度相等）。

然后在右边我们有两个divs，其高度加起来为 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;
}

【讨论】：

不，不，不，不，不！表格用于数据，仅此而已。您应该使用 CSS 表格布局来实现相同的效果，即使在 IE8 中也支持。

【解决方案2】：

您可以做的是首先将整个东西包装在一个容器中，而不是提供您的.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/

【讨论】：

【解决方案3】：

这是小提琴：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 或 % 为单位指定宽度来使其具有响应性。

编辑：这是一个响应迅速的更新小提琴：http://jsfiddle.net/RGaw5/1/

编辑 2：请注意，第一列的高度可以变化 - 无论高度是多少，其余的 div 都会相应地缩放。这是另一个左列高度不同的小提琴：http://jsfiddle.net/RGaw5/2/

【讨论】：