css - 如何创建一个具有一列和两个框的易响应网格？

我想创建一个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。

最佳答案

如果您只想使用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

希望这可以帮助。

关于css - 如何创建一个具有一列和两个框的易响应网格？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25127362/