最后一个元素的margin处理

本文转载自查看原文 2020-09-13 17:11 540 CSS

问题:

　　在进行布局的时候,同一个元素摆放后,设置margin-right让他们之间产生间距,那么最后一个元素的margin-right总是多于的

解决办法:

方法一:
1. 每一行的最后一个元素,总是加一个class,通过类选择器去除这个margin-right
方法二:
1. 通过伪类选择器,但是具有兼容器问题,IE8以下不支持

方法三:

.container固定的宽度> .wrap + 负margin> 很多的item

<style>
    .container {
      height: 600px;
      width: 990px;
      background-color: burlywood;
    }

    .wrap {
      margin-right: -10px;
    }
    .section {
      display: inline-block;
      height: 100px;
      width: 320px;
      background-color: goldenrod;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="wrap">
      <div class="section"></div>
      <div class="section"></div>
      <div class="section"></div>
      <div class="section"></div>
      <div class="section"></div>
      <div class="section"></div>
      <div class="section"></div>
      <div class="section"></div>
      <div class="section"></div>
    </div>
  </div>
</body>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 display: flex;弹性布局最后一个元素margin-right无效解决方案 freemarker遍历list处理第一个、最后一个元素 CSS解决ul下面最后一个li的margin 解决ul里最后一个li的margin问题 Jquery 删除最后一个元素 xpath取最后一个元素获取列表的最后一个元素 php 获取数组第一个元素以及最后一个元素 && 最后一个元素的键名 js 获取数组最后一个元素获取List中存放的最后一个元素