html - 将 div 置于响应式内联 block div 下方

Question

我有一个 div 网格，每个 div 都响应浏览器大小，因此它们的宽度与它们的高度成比例变化(它们的比例保持不变)。我想要一个单独的 div(它的高度仅由它包含的文本决定)位于所有这些下方，从而在页面底部为其自身创建额外的空间。目前它位于第一排下方。有解决办法吗？

感谢您的帮助。

https://jsfiddle.net/Ly008adL/

CSS:

* {
margin: 0;
padding: 0;
}

.wrapper {
width: 100%;
display: inline-block;
position: relative;
}

.wrapper:after {
padding-top: 71%;
display: block;
content: '';
}

.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

.ratio {
display: inline-flex;
float: left;
width: 50%;
height: 100%;
}

.red {
background-color: red;
}

.yel {
background-color: yellow;
}

.foot {
position: relative;
}

HTML:

<div class="wrapper">
<div class="main">
    <div class="ratio yel"></div>
    <div class="ratio red"></div>
    <div class="ratio red"></div>
    <div class="ratio yel"></div>
    <div class="ratio yel"></div>
    <div class="ratio red"></div>
</div>
</div>
<div class="foot">
<p>Text for the foot of the page </p>
</div>

一个 friend 帮我想出了一个可能的解决方案，涉及将高度除以行数，但我还不确定总行数，所以更灵活的方法是理想的...

Answer 1

css ratio trick您正在使用的是应用于 .wrapper 而不是单个元素。

我只是将它从 .wrapper 中删除，并将其应用于各个 .ratio 元素。我还必须将 padding-top 从 71% 加倍到 142% 以保持正确的比例，因为这些元素的宽度为 50% 而不是像 .wrapper 那样的 100% .

我还将 .main div 更改为 position:relative; 以便所有子项都能正确呈现，所以 .foot div 将在它之后呈现。

查看更新的 fiddle here .