龙喵专栏 /前端 /内容

CSS 列表项布局技巧

版权声明:龙喵网!!!网站网址:http://ailongmiao.com

工作中遇到的CSS列表项布局问题

在开发中我们经常会遇到关于如何展示列表的问题,例如:

图片选择器列表:
图片选择器列表

人员部门选择列表
人员部门选择列表

工作状态列表
工作状态列表

CSS 列表项布局通用解决办法

为了让其看起来更加舒适美观,通常我们会在每个列表项上添加 margin-right 和 margin-bottom 属性来隔开它们,然后一行超过容器长度后进行换行

那么在各种情况下,如何处理列表项中margin-rightmargin-bottom,让列表间隔和换行看起来更加自然美观是本篇的重点

元素宽度已知,即知道每行最多多少个,且所有元素都在一个容器中

思路:item 在一个容器中,每第三个去掉 margin-right,最后三个取消 margin-bottom(如最后一行不满 3 个也不影响)

  <style>
    .item {
      display: inline-block;
      width: 100px; /* 宽度一定 */
      margin-right: 30px;
      margin-bottom: 20px;
      padding: 5px 10px;
      font-size: 20px;
      border-radius: 5px / 5px;
      background: rgb(103, 164, 243);
    }
    .item:nth-child(3n) { margin-right: 0; }
    .item:nth-last-child(-n+3) { margin-bottom: 0; }
  </style>
<div class='container'>
    <div class='item'>最多放三个</div>
    <div class='item'>最多放三个</div>
    <div class='item'>最多放三个</div>
    <div class='item'>最多放三个</div>
    <div class='item'>最多放三个</div>
    <div class='item'>最多放三个</div>
    <div class='item'>最多放三个</div>
</div>

运行截图

元素宽度已知 或 未知,且元素按照行数在相应容器中

思路:最后一个 container 去掉 margin-bottom,最后一个 item 去掉 magin-right

  <style>
    .container {
      margin-bottom: 20px;
    }
    .container:last-child { margin-bottom: 0; }
    .item {
      display: inline-block;
      margin-right: 30px;
      padding: 5px 10px;
      font-size: 20px;
      border-radius: 5px / 5px;
      background: rgb(103, 164, 243);
    }
    .item:last-child { margin-right: 0; }
  </style>
  <div class="wrapper">
    <div class='container'>
      <div class='item'>两个才能成一行呀...</div>
      <div class='item'>两个才能成一行呀...</div>
    </div>
    <div class='container'>
      <div class='item'>三个成一行</div>
      <div class='item'>三个成一行</div>
      <div class='item'>三个成一行</div>
    </div>
    <div class='container'>
      <div class='item'>独成一行呀独成一行呀独成一行呀独</div>
    </div>
    <div class='container'>
      <div class='item'>四个呀</div>
      <div class='item'>四个呀</div>
      <div class='item'>四个呀</div>
    </div>
  </div>

运行截图

元素宽度未知,即不知道一行最多多少个,且所有元素都在一个容器中,常见于 flex 布局

法1:Flex 布局

思路:利用 flex 布局的 justify-content 主轴属性来控制元素的间距

缺点:flex 虽然强大,但是面对 长度不定的列表项布局 还是不能很好满足要求

<style>
    .container {
      display: flex;
      width: 391px;
      padding: 10px;
      margin: 150px auto;
      flex-wrap: wrap;
      border: 2px solid rgb(240, 103, 103);
      justify-content: space-between;
    }
    .item {
      display: -webkit-box;
      margin-bottom: 20px;
      padding: 5px 10px;
      font-size: 20px;
      border-radius: 5px / 5px;
      background: rgb(103, 164, 243);
    }
  </style>
  <div class='container'>
    <div class='item'>两个可以成一行</div>
    <div class='item'>两个可以成一行</div>
    <div class='item'>这三个字</div>
    <div class='item'>四个</div>
    <div class='item'>独成一行呀独成一行呀独成一行呀独成</div>
    <div class='item'>两个才能成一行呀</div>
    <div class='item'>四个</div>
  </div>

运行截图

法2:负margin

接下来介绍 负margin 方法,可以很好的解决 长度不定的列表项布局 问题

思路:用一个 wrapper 包在最外层,container 设置 负的 margin 来抵消 item 的 外边距

  <style>
    .wrapper {
      width: 391px;
      padding: 10px;
      margin: 150px auto;
      border: 2px solid rgb(240, 103, 103);
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: -20px;
      margin-right: -30px;
    }
    .item {
      display: -webkit-box;
      margin-right: 30px;
      margin-bottom: 20px;
      padding: 5px 10px;
      font-size: 20px;
      border-radius: 5px / 5px;
      background: rgb(103, 164, 243);
    }
  </style>
  <div class="wrapper">
    <div class='container'>
      <div class='item'>两个才能成一行呀</div>
      <div class='item'>两个才能成一行呀</div>
      <div class='item'>这三个字</div>
      <div class='item'>四个</div>
      <div class='item'>独成一行呀独成一行呀独成一行呀独成</div>
      <div class='item'>两个才能成一行呀</div>
      <div class='item'>四个</div>
    </div>
  </div>

运行截图

多多利用 css3 属性来帮助我们更好的布局列表,避免使用 js 控制列表项,做到 css 与 js 解耦,更利于项目的维护

版权声明:龙喵网!!!网站网址:http://ailongmiao.com

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/389.html

[ web前端导航 ]:http://ailongmiao.com/web/

相关阅读

    评论

    继续阅读

    细数CSS伪元素及其用法

    Web前端 2019-03-29 8

    CSS中有两个很常见的概念,伪类和伪元素。伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元

      选择打赏方式

    打赏

    打赏