CSS设置div或li自适应列数显示

要求在在1300px的时候显示4个,出现横向滚动条 布局:html内 <div class="main-wrapper"> <ul class="ul-list"><li>1</li><li>2</li><li>3</...

要求在在1300px的时候显示4个,出现横向滚动条

布局:html内

<div class="main-wrapper">
<ul class="ul-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</div>

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%;

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

578 篇文章

作家榜 »

  1. admin 578 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. quanyi 0 文章