javascript - 响应式网格(高度问题)

Question

尝试制作响应式正方形网格。

Fiddle

HTML

<div class="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

CSS

.container {
    width: 300px;
}
ul {
    list-style: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 300px;
}
li {
    width: 33%;
    height: 33vw;
    float: left;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
}

宽度很容易计算，我也可以使用 css 表格，但是我正在尝试制作完美的响应式正方形....我唯一知道如何做到这一点的其他方法是使用 javascript 获取宽度并将其应用于高度。是否有一种纯 CSS 方法可以使每个 LI 的高度与宽度匹配？

Answer 1

您可以利用 little trick with margins .

将内容包裹在宽度为 0 和高度为 0 的元素中:

<li><span>1</span></li>

然后为它们使用以下样式:

li > span {
    display: block;
    width: 0;
    height: 0;
    margin: 0 100% 100% 0;
}

鲜为人知的事实是，百分比长度的边距始终指的是容器的宽度，即使您设置的是垂直 margin 。