响应2列2行布局 [英] responsive 2 column 2 row layout

问题描述

我一直在努力弄清楚如何创建这个布局，我有一个2列布局，左列有1行，右边有2.我试图让它进行流畅的调整。我有麻烦的是我想要顶部图像的顶部对齐左侧图像的顶部，而底部图像的底部保持对齐左侧图像的底部。我应该使用表吗？

这里是我到目前为止..不是很接近我真的很感谢帮助。

 < div id = left-container> 
< div id =leftclass =black>< / div> 
< p class =description-text-left>列印列克星敦< / p> 
< / div> 
< div id =right> 
< div id =right-topclass =black>< / div> 
< p class =description-text>列印列克星敦< / p> 
 
< div id =right-bottomclass =black>< / div> 
< p class =description-text>列印列克星敦< / p> 
< / div> 
  

您可以通过给出vw或％中的宽度来响应。

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

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

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

解决方案

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/

这篇关于响应2列2行布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！