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 获取宽度并将其应用于高度。是否有纯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;
}

鲜为人知的事实是，即使您设置垂直，百分比长度始终的边距也会引用容器的 width >保证金。

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

响应式网格（高度问题）

2 个答案: