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:;

  padding-bottom: 25%;

  position: relative;

}

.card {

  position: absolute;

  top:;

  right:;

  bottom:;

  left:;

  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:;

  position: relative;

}

.card {

  position: absolute;

  top:;

  right:;

  bottom:;

  left:;

  border: 1px solid #C0C0C0;

}

巴特西

Layout 不可思议（一）—— CSS 实现自适应的正方形卡片

最新文章

热门文章