在没有固定断点的情况下响应地从水平布局跳转到垂直布局
在没有固定断点的情况下响应地从水平布局跳转到垂直布局
提问于 2016-11-23 21:39:53
使用CSS (内联块、flex等)实现这种水平布局的方法有很多：
[item 1] [item 2] [item 3] [item 4]如果项都不适合单行，这些方法通常会换到多行，每行包含多个项。
我希望布局跳转到所有屏幕大小的每行一项，如果这些项不适合于一行：
[item 1]
[item 2]
[item 3]
[item 4]这在CSS中是可以实现的吗?没有：
- javascript
- 添加一个固定的宽度断点(这取决于知道项目的确切宽度)。
Stack Overflow用户
发布于 2016-11-23 22:39:16
像这样吗？
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF FOUR */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.6%;
}
.span_2_of_4 {
width: 49.2%;
}
.span_1_of_4 {
width: 23.8%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}<div class="section group">
<div class="col span_1_of_4">
1 of 4
</div>
<div class="col span_1_of_4">
1 of 4
</div>
<div class="col span_1_of_4">
1 of 4
</div>
<div class="col span_1_of_4">
1 of 4
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40774586
复制相关文章
相似问题
腾讯云开发者
