以下源码来源于张鑫旭的博客：博客原链接以及样式https://www.zhangxinxu.com/study/201708/percent-padding-auto-layout.html
copy下来格式化后的代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="description" content="百分比padding与固定比例图片自适应布局 » 张鑫旭-鑫空间-鑫生活" /> <meta name="description" content="张鑫旭web前端学习实例页面 百分比padding与固定比例图片自适应布局" /> <meta name="keywords" content="padding, css, 布局, 图片, 自适应" /> <meta name="author" content="张鑫旭, zhangxinxu" /> <title>百分比padding与固定比例图片自适应布局 » 张鑫旭-鑫空间-鑫生活</title> <link rel="stylesheet" href="../css/demo.css"> <link rel="stylesheet" href="../css/hl.css"> <style> .works-wrap { max-width: 1000px; margin: auto; } .works-con { padding: 0; margin: 0 -.5em; list-style: none; overflow: hidden; } .works-item { display: inline-block; min-width: 150px; width: calc(20% - 1em); margin: 20px .5em 0; background: AppWorkspace; vertical-align: top; } .works-item-t { padding-bottom: 133%; position: relative; } .works-item-t>img { position: absolute; width: 100%; height: 100%; } .works-item-b { margin: .5em .5em 1em; } .works-item-h { margin: 10px 0 0; color: CaptionText; font-size: 100%; } .works-btn-box { padding-top: 10px; } .works-btn { display: inline-block; padding: 0 8px; font-size: 87.5%; line-height: 25px; text-decoration: none; background: DarkGoldenrod; color: White; } @media screen and (max-width: 1000px) { .works-item { width: calc(25% - 1em); } } @media screen and (max-width: 768px) { .works-item { width: calc(33.3% - 1em); } } @media screen and (max-width: 580px) { .works-item { width: calc(50% - 1em); } } @media screen and (max-width: 400px) { .works-item { width: calc(100% - 1em); } } .container { position: relative; width: 100%; height: 500px; background: #ffff66 } .left { position: absolute; width: 200px; background: #ff0066; top: 0; height:100%; left: 0 } .center{ margin-left: 200px; margin-right: 200px; position: relative; background: #ffff66; height: 100%; } .right { width:200px; position: absolute; top:0; right: 0; height: 100%; background:#66ffff } .flex-container{ display: flex; width:100%; height: 800px; background: #ffff00 } .flex-left{ width:200px; height: 100%; flex:0 1 auto; background: #00ff00; } .flex-center{ position: relative; flex:1; background: #00ffff; height: 100%; } .flex-right { width: 200px; height: 100%; flex:0 1 auto; background:#ff00ff } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> <div class="flex-container"> <div class="flex-left"></div> <div class="flex-center"></div> <div class="flex-right"></div> </div> <div id="main"> <div id="body" class="light"> <div id="content" class="show"> <div class="demo"> <div class="works-wrap"> <ul class="works-con"> <li class="works-item"> <div class="works-item-t"> <img src="./150x200.png"> </div> <div class="works-item-b"> <h4 class="works-item-h">一念永恒</h4> <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读 ></a></div> </div> </li> <li class="works-item"> <div class="works-item-t"> <img src="./150x200.png"> </div> <div class="works-item-b"> <h4 class="works-item-h">RE从零开始的异世界生活</h4> <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读 ></a></div> </div> </li> <li class="works-item"> <div class="works-item-t"> <img src="./150x200.png"> </div> <div class="works-item-b"> <h4 class="works-item-h">一念永恒</h4> <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读 ></a></div> </div> </li> <li class="works-item"> <div class="works-item-t"> <img src="./150x200.png"> </div> <div class="works-item-b"> <h4 class="works-item-h">一念永恒</h4> <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读 ></a></div> </div> </li> <li class="works-item"> <div class="works-item-t"> <img src="./150x200.png"> </div> <div class="works-item-b"> <h4 class="works-item-h">一念永恒</h4> <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读 ></a></div> </div> </li> <li class="works-item"> <div class="works-item-t"> <img src="./150x200.png"> </div> <div class="works-item-b"> <h4 class="works-item-h">一念永恒</h4> <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读 ></a></div> </div> </li> <li class="works-item"> <div class="works-item-t"> <img src="./150x200.png"> </div> <div class="works-item-b"> <h4 class="works-item-h">一念永恒</h4> <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读 ></a></div> </div> </li> <li class="works-item"> <div class="works-item-t"> <img src="./150x200.png"> </div> <div class="works-item-b"> <h4 class="works-item-h">一念永恒</h4> <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读 ></a></div> </div> </li> <li class="works-item"> <div class="works-item-t"> <img src="./150x200.png"> </div> <div class="works-item-b"> <h4 class="works-item-h">一念永恒</h4> <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读 ></a></div> </div> </li> <li class="works-item"> <div class="works-item-t"> <img src="./150x200.png"> </div> <div class="works-item-b"> <h4 class="works-item-h">一念永恒</h4> <div class="works-btn-box"><a href="/wordpress/?p=6348" class="works-btn">立即阅读 ></a></div> </div> </li> </ul> </div> </div> </div> </div> </div> </body> </html>完事样式如下：
然后一下午就在这问题上卡过去了~ 最后咨询A君：A君？但 给出了外层ul：font-size:0,内层li：font-size:16px的方式问题解决， 原因：https://blog.csdn.net/qq_32614411/article/details/82223624?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
