Question

我一直试图弄清楚如何创建这个布局，我有一个2列布局，左列有1行，右边有2.我试图让它进行流畅调整。我遇到麻烦的是，我希望右侧顶部图像的顶部与左侧图像的顶部对齐，而底部图像的底部与左侧图像的底部保持对齐。我应该用桌子吗？

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

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

这是我想要完成的 enter image description here

的图像

Answer 1

我能想到的最接近的是一张有一排和两个牢房的桌子（因此两边的高度相等）。

然后在右边我们有两个div s，高度加起来达到100％（例如，顶部为60％，底部为40％）。

我们将为上部块指定vertical-align: top，为较低的块指定vertical-align: bottom。在顶部，这将产生所需的效果，但在底部，垂直对齐没有正确启动，因为我们只有一个要对齐的元素。为了解决这个问题，我们需要一个100％高度的扳手元素，并将其放置在＆＃34; real＆＃34;块。

此处，.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;
}

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或％来使其响应。

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

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

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/

响应2列2行布局

3 个答案: