Question

我有一个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>

一位朋友帮我弄清楚了一个潜在的解决方案，包括将高度除以行数，但我还不确定总行数，所以更灵活的东西是理想的...

Answer 1

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

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

我还将.main div更改为position:relative;，以便所有孩子都能正确呈现，因此.foot div会在其后呈现。

请参阅更新的小提琴here。

将div定位在响应式内联块div之下

1 个答案: