要求在在1300px的时候显示4个,出现横向滚动条
布局:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
【自适应列数显示】css如下:
方法一:行内
.main-wrapper{
overflow: auto;
}
.ul-list{
width: 100%;
font-size: 0;
overflow: auto;
li{
width: 25%;
min-width: 252px;
display: inline-block;
background: red;
border:1px solid #ccc;
font-size: 14px;
}
}@media (max-width:1300px){
.ul-list{
width: 1008px;
}
}方法二:弹性
.ul-list{
width: 100%;
display: flex;
flex-wrap: wrap;
li{
width:25%;
min-width: 252px;
display: inline-block;
background: red;
border:1px solid #ccc;
font-size: 14px;
}
}@media (max-width:1300px){
.ul-list{
width: 1008px;
}
}如需要再某个分辨率下显示多少列的话,可以用弹性盒模型+媒体查询 然后 li的宽度等于列数/100%;