[英]Responsive grid (height issue)
试图使响应正方形的网格。
的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方法?
您可以应用以下样式属性来维护方形容器。 我绝对会推荐使用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%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.