[英]Responsive grid (height issue)
Trying to make a grid of responsive squares. 试图使响应正方形的网格。
HTML 的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 的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;
}
Width is easy to figure out, i could also use css tables, however im trying to make perfect squares that are responsive.... only other way i know how to do this is by using javascript to get the width and apply it to the height. 宽度很容易弄清楚,我也可以使用css表,但是我正在尝试制作具有响应能力的完美正方形。...我知道如何做到这一点的其他方法是使用javascript获取宽度并将其应用于高度。 Is there a pure CSS way of making the height of each LI match the width?
是否有使每个LI的高度与宽度匹配的纯CSS方法?
You can take advantage of a little trick with margins . 您可以利用带有边距的小技巧 。
Wrap the content in 0-width and 0-height elements: 将内容包装在0宽度和0高度元素中:
<li><span>1</span></li>
and then use the following style for them: 然后对他们使用以下样式:
li > span {
display: block;
width: 0;
height: 0;
margin: 0 100% 100% 0;
}
The little known fact is that margins with percentage lengths always refer to the width of the container, even if you're setting a vertical margin. 鲜为人知的事实是,即使您设置了垂直边距,带百分比长度的边距也总是指容器的宽度 。
You could apply the following styling attributes to maintain square containers. 您可以应用以下样式属性来维护方形容器。 I would definitely recommend the use of jQuery though, it will be much more stable and far less 'hacky'.
我绝对会推荐使用jQuery,但是它会更加稳定并且不会出现“ hacky”。
HTML 的HTML
<ul>
<li><p>Content</p></li>
</ul>
CSS 的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.