table 中具有行跨度的响应高度 div 单元格

Question

嗨，这可能更容易用图像来解释。我正在使用 foundation 6 制作带有横幅的布局。布局如下所示：

我遇到的问题是我不知道如何做一个纯粹的 CSS 解决方案来获得响应图像的框 1、2、3 等三分之一（带边距）。我可以用几行 jquery 来做到这一点，但我忍不住认为这并不是最好/最快的解决方案。

就像我说的那样，我正在使用 foundation 6，所以很高兴使用 flexbox 对其进行排序，如果这是一种方式的话，但到目前为止我的实验失败了。

我可以 post 目前为止的代码，但我不认为它特别有用，因为获得这样的布局很容易，只是灰色框上的高度不会扩展整个高度。

感谢您的帮助

Answer 1

一般
- viewport measurements vw vh
- percentage measurements
外容器：
- display: table
- min-width: fit-content
离开
- background-image background-repeat（在shorthand）
- background-size
- display: table-cell
右边是flexbox
- display: flex
- flex-flow: row wrap
- align-content: space-between

片段

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flexSeries3</title>
<style>
#main { min-width: -moz-fit-content; min-width: -webkit-fit-content; min-width: fit-content; height: auto; overflow: hidden; display: table; table-layout: fixed; }
.iImg { width: 49vw; height: 96vh; display: table-cell; background: url(https://cdn0.vox-cdn.com/thumbor/xH2LQ-c4CZJp6X-Iv27s7kvDRts=/cdn0.vox-cdn.com/uploads/chorus_asset/file/4106218/GettyImages-489748146_master.0.jpg) no-repeat; background-size: contain; background-position: center; outline: 3px ridge #999; }
.iFlex { display: flex; flex-flow: row wrap; align-items: center; align-content: space-between; width: 49vw; height: 96vh; background: #fff; }
.fBox { width: 48%; height: 32%; background: #777; margin: 1%; }
.fFoot { width: 98%; height: 32%; background: #777; margin: 1%; }
#f1 { order: 1; }
#f2 { order: 2; }
#f3 { order: 3; }
#f4 { order: 4; }
#f5 { order: 5; }
</style>
</head>

<body>
<main id="main">
<section class="iImg">
</section>
<section class="iFlex">
<div id="f1" class="fBox">1</div>
<div id="f2" class="fBox">2</div>
<div id="f3" class="fBox">3</div>
<div id="f4" class="fBox">4</div>
<div id="f5" class="fFoot">5</div>
</section>
</main>
</body>
</html>

table 中具有行跨度的响应高度 div 单元格

Responsive height div cells in table with row span

html

css

zurb-foundation