Question

嗨，这可能更容易用图像来解释。我使用粉底6制作横幅布局。布局如下所示：

我遇到的问题是，我不知道如何使用纯CSS解决方案来获得响应式图像的第1,2,3等框（带边距）。我可以用几行jquery做到这一点，但我无能为力，但我认为这不是最好/最快的解决方案。

就像我说的那样，我使用基础6很高兴使用flexbox来对它进行排序，如果这是一种方法，但到目前为止我的实验都失败了。

我可以发布我到目前为止的代码，但我不认为它特别有用，因为得到这样的布局很容易，只是灰色框上的高度并没有。 t延伸全高。

感谢您的帮助

Answer 1

一般
- viewport measurements vw vh
- percentage measurements
外容器：
- display: table
- min-width: fit-content
左
- background-image background-repeat（简写）
- 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>

响应高度div细胞在表中与行跨度

1 个答案: