responsive 2 column 2 row layout

问题

I have been trying to figure out how to create this layout, I have a 2 column layout with the left column having 1 row and the right side having 2. Im trying to get it to adjust fluidly. What im having trouble with is I would like the top of the top image on the right to align with the top of the left image while the bottom of the bottom image stays aligned with the bottom of the left image. Should I use a table?

here is what I have so far.. not very close I really appreciate the help.

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

here is an image of what I would like to acomplish

回答1:

The closest I could come up with was a table with a single row and two cells (so both sides would be equal in height).

Then on the right we have two divs with heights adding up to 100% (say, 60% for the top and 40% for the bottom).

We'll specify vertical-align: top for the upper block, and vertical-align: bottom for the lower one. On top this will produce the desired effect, but on the bottom the vertical align doesn't kick in properly because we only have one element to align. To fix this, we need a spanner element with 100% height and place this adjacent to the "real" block.

Here, .block would represent the content inside the cell, e.g. image and caption.

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

回答2:

What you can do is first wrap the whole thing in a container, than give your .right:{float:right} and remove the float:left in other classes. See the code

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

.right {
    float: right;
}

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

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

This looks the same as your pic: http://jsfiddle.net/aC7j6/1/

回答3:

Here's the fiddle: 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>

You can make it responsive by giving the width in vw or %.

EDIT: Here's a responsive, updated fiddle: http://jsfiddle.net/RGaw5/1/

EDIT 2: Note that the first column's height can vary - no matter what's the height, the rest of the divs will scale accordingly. Here's one more fiddle with a different left column's height: http://jsfiddle.net/RGaw5/2/

来源：https://stackoverflow.com/questions/24025582/responsive-2-column-2-row-layout

标签

css

html5

layout

responsive-design