尝试制作响应式正方形网格。
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 的高度与宽度匹配?
最佳答案
您可以利用 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 。
关于javascript - 响应式网格(高度问题),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20891928/