Layout 不可思議（一）—— CSS 實現自適應的正方形卡片

最近被一個布局問題給難住了，枉我一向自稱掌握最好的前端技能是 CSS，寫完博客就得敷臉去

需求是實現一個自適應的正方形卡片，效果如下：

順便（開個坑）寫個系列，總結那些設計精妙的布局結構

 

 

本次頁面的 HTML 結構如下：

<div class="row clearfix">
    <div class="col fl">
        <div class="card"></div>
    </div>
    <div class="col fl">
        <div class="card"></div>
    </div>
</div>

 

套路一、垂直 padding + 定位

在 CSS 中，margin 和 padding 的百分比數值總是相對於父元素的寬度來計算

利用這個特性，只要將 padding-top 或者 padding-bottom 設置為與 width 相同的百分比，再將 height 設為 0，最后通過定位實現自適應的正方形盒子

.col {
  width: 25%;
  height:0;
  padding-bottom: 25%;  
  position: relative;
}
.card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #C0C0C0;
}

有很多文章都提到過，因為設置了 height: 0; 導致 max-height 無效

通常會使用偽類元素來解決這個問題，但同時也會有高度溢出的情況

如果采用我上面的 html 結構，只需要將 max-height 寫到 .card 上，就不會有這個問題，也就用不着偽類元素了

 

 

套路二、新單位 vw

參考文章：http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

除了常用的 px，em，rem 之外，CSS 中還有很多單位，比如 pt，ch，vh，vmin 等

這里提到的單位 vw 是一個 相對於瀏覽器內部的可視區域（viewport）寬度的單位（敲黑板，不是父元素）

vw 等於 viewport 寬度的 1%，假設瀏覽器內部寬度為 1000px，那么 1vw = 10px

 

然后 CSS 代碼就很簡單了

.col {
  width: 25%;
  height:25vw;
}
.card {
  width: 100%;
  height: 100%;
  border: 1px solid #C0C0C0;
}

 

 

套路三、用透明圖片擴充內容

極不推薦！！

大學的時候見過這種布局，這種套路是黔驢技窮的表現，了解一下就行

在 HTML 結構中添加一個  <img> 標簽

<div class="col fl">
    <img src="" alt="正方形透明圖片" width="100%"/>
    <div class="card"></div>
</div>

.col {
  width: 25%;
  height: 0;
  position: relative;
}
.card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #C0C0C0;
}