Question

我有这些堆积的div height: 100vh;（存在polyfill）。然后在那个div中，我有8个div，它们被认为是一个完美的正方形，我使用width: 0;和padding-left: 25%;技巧。但我想知道如何让2行始终适合height: 100vh; div并缩小以保持1:1比率。

我已提供JSFiddle开始使用。

Answer 1

我不完全确定这是否是您要找的，但您可以将.entropy的高度和宽度设置为视口高度的25％。这样他们将永远是平方的。

然后你可能想要每隔5个方格清除一次浮动。

.wrap {
    height: 100vh;
    zoom: 1;
}

.wrap:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.entropy {
    float: left;
    width: 25vh;
    height: 25vh;
    border: 1px solid red;
}

.entropy:nth-of-type(5n) {
    clear: left;
}

.entropy:before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    height: 100%; 
}

.entropy p {
    display: inline-block;
    vertical-align: middle;
}

<div class="wrap">
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
</div>

编辑：另一种方法是执行以下操作：

.entropy {
    position: relative;
    width: 25%;
    overflow: hidden;
    float: left;
}
.entropy:before {
    content: "";
    display: block;
    padding-top: 25vw;
}

这样可以更轻松地集中所有内容，但您可能需要稍微更改一下HTML。

此处基于视口宽度的示例： jsfiddle 。

这里有一个基于视口高度的示例： jsfiddle 。

100vh，50％和响应能力

1 个答案: