CSS樣式：等分，外邊距不隨頁面拉伸而改變大小（畫素）
阿新 • • 發佈：2018-12-19
描述：有三個div，要求排成一排後三個div大小一致，間距固定為10px，且頁面拉伸時間距固定為10px，但是div的大小會隨頁面拉 伸進行等比例變化。
一步一步來，先做基礎結構;這裡以排列後所佔空間為60%為例，然後做一個左浮動。
第二步也就是最重要的一步，給三個block外面套上一個比center寬10px的外套。但是！center是百分比，而比他寬10px怎麼做呢，margin為負值。然後用一個overflow隱藏超出的10px部分。
第三部在這三個block裡面再加上三個小的div（class="test"），然後在這三個div裡面加上右側外邊距。完整程式碼如下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ margin: 0; padding: 0; } .clear{clear: both;} .center{ height: 100px; width: 60%; background-color: pink; margin: 0 auto; overflow: hidden; } .center-big{ height: 98px; margin-right: -10px; } .block{ height: 100%; width: 33.33%; background-color: aquamarine; float: left; } .test{ height: 100%; background-color: #BDB76B; margin-right: 10px; } </style> </head> <body> <div class="container"> <div class="center"> <div class="center-big"> <div class="block"> <div class="test"></div> </div> <div class="block"> <div class="test"></div> </div> <div class="block"> <div class="test"></div> </div> <div class="clear"> </div> </div> </div> </div> </body> </html>
最終效果如下：
PS：老師講的，之所以不用calc是因為不是所有瀏覽器都支援……個人感覺這個方法很巧妙所以就記錄下來了。
新人剛開始學習前端。純粹筆記和分享所用。拋磚引玉。歡迎大佬來指導。