自适应列数显示

要求在在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%;

    推荐阅读