响应式内联块 div 下方的位置 div

Question

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

感谢您的帮助。

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>

一位朋友帮我找出了一个可能的解决方案，其中涉及 div根据行数来确定高度，但我还不确定总行数，因此更灵活的方法会更理想。 ..

Answer 1

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

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

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

查看更新后的 fiddle here。

响应式内联块 div 下方的位置 div

Position div below responsive inline-block divs

html

css

position

responsive-design