一行中的元素除去第一个和最后一个，中间元素均匀分布

最新推荐文章于 2021-06-05 02:15:07 发布

要开心地学习呀~~

最新推荐文章于 2021-06-05 02:15:07 发布

阅读量198

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45800951/article/details/109142179

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

HTML

      <div class="addContent">
          <div class="div1">1</div>
          <div class="div1">2</div>
          <div class="div1">3</div>
          <div class="div1">4</div>
          <div class="div1">5</div>
          <div>6</div>
      </div>

CSS

.addContent{
    background-color: #00C758;
    width: 1300px;
    height: 150px;
    margin-top: 500px;
}
.addContent div{
    float: left;
    width: 15%;
    height: 150px;
    background-color: orangered;
}
    .div1{
        margin-right: 2%;
    }

在这里插入图片描述
一共有6个盒子，每个盒子占15%宽度，15*6=90，间隙还剩下10%，有5个间隙，每个间隙分配下来就是2%，这样就能实现前后靠边，中间均匀分布。

参考链接：https://blog.csdn.net/changfeng6616/article/details/79483614?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160298732919725271713705%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=160298732919725271713705&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_v2~rank_v28-4-79483614.first_rank_ecpm_v3_pc_rank_v2&utm_term=%E6%80%8E%E4%B9%88%E8%AE%A9div%E5%9D%87%E5%8C%80%E5%88%86%E5%B8%83&spm=1018.2118.3001.4187