例子一、
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 }