Javascript 响应网格（高度问题）

试着做一个有响应的正方形网格

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>

<ul>
    <li><p>Content</p></li>
</ul>

---

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

您可以利用一个

将内容包装在0宽度和0高度元素中：

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

---

鲜为人知的事实是，具有百分比长度的边距总是指容器的宽度，即使您正在设置垂直边距。

您可以应用以下样式属性来维护方形容器。不过，我肯定会推荐使用jQuery，因为它会更加稳定，而且“黑客”更少

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>

<ul>
    <li><p>Content</p></li>
</ul>

---

因此，您希望或多或少地从JSFIDLE示例中获得6个响应性设计的完美正方形？您以300px为基础计算宽度，为什么不以高度为基础？我相信这是@Danko所说的一个很好的例子：300px只是一个示例容器，容器的宽度总是在变化，因此宽度+高度不能是固定的宽度，所以是的6完美的正方形你试图将列表显示为表格吗？@matija你是对的，不是。也许我本能地这样做是为了在水平和垂直行为之间创造一种对称性。

ul {
    width:100%;
    list-style-type:none;
    margin:0;
    padding:0;
}
ul li {
    width:33%;
    padding-bottom:33%;
    position:relative;
}
ul li p {
    position:absolute;
    width:100%;
}