如何使用一列和两个框创建一个简单的响应式网格？

Question

我想创建一个有两列的 CSS 网格（不使用任何外部库）。第一列包含一个框。第二列包含两个框。

第一列/左列中的框应具有两个框的高度（相应地考虑边距底部）。看看下图 - 红色框代表不受欢迎的行为，绿色代表想要的行为。

首先：这是否可能不使用任何JavaScript（例如计算两个右框的总和并动态设置左框的高度）？

如果是，我怎样才能最有效地使用 CSS 实现这一点？我如何确保这也适用于平板电脑和智能手机等移动设备？我想避免使用表格。

在尝试实现这一点时，我总是对position、display 和float 感到困惑。但这是我迄今为止尝试过的，但问题是我静态设置了左框的高度。

display: inline-block; width: 40%; min-width: 420px 是我试图让它保持响应。

CSS

.box-layout {
  display: inline-block;
  width: 40%;
  float: left;
  outline: 1px solid #C3C3C3;
  padding: 10px 20px;
  margin: 0 10px;
  background-color: #FAFAFA;
  min-width: 420px;
}

.left-box {
  min-height: 440px;
}

HTML

<div class="box-layout left-box">
    <h1>Left large box</h1>
</div>

<div class="box-layout right-box right-box-first">
    <h1>Right first box</h1>
</div>

<div class="box-layout right-box right-box-second">
    <h1>Right second box</h1>
</div>

Here is a jsFiddle.

Answer 1

如果您只想使用 CSS 来实现这一点，我建议您使用父容器

.container{
    width:1024px;
    margin:0 auto;
    height:440px;
}

这是sample JSFiddle

此时，您需要确定这些框的高度。如果你想要高度动态，据我所知你应该使用 JS，像这样；

$(document).ready(function(){
    var height = $(window).height();
    var leftBoxHeight = height;
    var rightBoxHeight = height / 2 - 20;
    $('.left-box').css('height', leftBoxHeight + 'px');
    $('.right-box').css('height', rightBoxHeight + 'px');
});

这是我的第二个JSFiddle

希望这会有所帮助。