最后一個元素的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中存放的最后一個元素