響應式網格（高度問題）

Question

試圖使響應正方形的網格。

小提琴

的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獲取寬度並將其應用於高度。 是否有使每個LI的高度與寬度匹配的純CSS方法？

Answer 1

您可以利用帶有邊距的小技巧 。

將內容包裝在0寬度和0高度元素中：

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

然后對他們使用以下樣式：

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

鮮為人知的事實是，即使您設置了垂直邊距，帶百分比長度的邊距也總是指容器的寬度 。

Answer 2

您可以應用以下樣式屬性來維護方形容器。 我絕對會推薦使用jQuery，但是它會更加穩定並且不會出現“ hacky”。

的HTML

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

的CSS

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%;
}