例子一、
html代码
1 <div class="box"> 2 <div class="inner"> 3 <span>padding-bottompadding-bottompaddinadding-bottompadding-bottompaddinadding-bottompadding-bottompaddin</span> 4 </div> 5 </div>
css代码
1 .box { 2 width: 100px; 3 height: 10px; 4 border: 1px solid blue; 5 6 } 7 .inner { 8 /* padding-top: 100%; */ 9 overflow: hidden; 10 border: 1px solid red; 11 /* 为下面内容的绝对定位做准备 */ 12 position: relative; 13 } 14 /* 使用伪元素给 .inner添加一个子级，用来撑开父元素的高度，这样内容就会是100px， 15 如果把padding-top放在父元素中，那么父元素会加上border的值，用子元素（内容，不加border）撑起来的高度纯粹一点，*/ 16 .inner::after { 17 content: ''; 18 display: block; 19 padding-top: 100%; 20 } 21 .inner span { 22 position: absolute; 23 left: 0; 24 top: 0; 25 }
例子二
html
1 <div class="box"> 2 <div class="inner"> 3 <a href=""><img src="image/xigua.jpg" ></a> 4 <a href=""><img src="image/xigua.jpg" ></a> 5 <a href=""><img src="image/xigua.jpg" ></a> 6 </div> 7 </div>
css
1 .box { 2 width: 33.33%; 3 height: 3px; 4 border: 1px solid red; 5 } 6 .inner a { 7 /* 为包含的图片设置绝对定位做准备 */ 8 position: relative; 9 float: left; 10 /* 宽度等于总宽度的33.33% - 根em（默认16px） */ 11 width: calc(33.33% - 1.6rem); 12 margin: 1.2rem 0 0 1.2rem; 13 /* 设置连接a的外边线 */ 14 outline: 1px solid #dedede; 15 } 16 /* 用来撑起父元素，a的高度 如果给a设置padding-top ，那么高度就会是inner继承的父元素的宽度*/ 17 .inner a::before { 18 content: ''; 19 display: block; 20 padding-top: 100%; 21 } 22 .inner a img { 23 position: absolute; 24 left: 0; 25 top: 0; 26 width: 100%; 27 height: 100%; 28 }
例子二更简单的一种方法
1 .box { 2 /* 屏幕宽度的33.33% */ 3 width: 33.33%; 4 height: 3px; 5 border: 1px solid blue; 6 } 7 .inner a { 8 float: left; 9 /* 屏幕宽度33.33后再取33.33% */ 10 width: calc(33.33% - 1.62rem); 11 /* vw单位是相对于视口（屏幕）宽度的 */ 12 height: calc(33.33vw/3 - 1.6rem); 13 margin: 1.2rem 0 0 1.2rem; 14 outline: 1px solid #dedede; 15 } 16 .inner a img { 17 display: block; 18 width: 100%; 19 height: 100%; 20 }