内容转自CSS世界，理解之后进行了简化，简化后代码：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>CSS世界--展开/收起功能</title> <style> .table { display: table; width: 100%; width: calc(100% - 30px); max-width: 400px; margin: auto; table-layout: fixed; text-align: left; } .td { display: table-cell; padding: 5px; } input[type="checkbox"] { position: absolute; clip: rect(0 0 0 0); } .check-in, .check-out { color: #34538b; cursor: pointer; } .check-out { display: none; } :checked ~ .check-out { display: inline-block; } :checked ~ .check-in { display: none; } .element { max-height: 0; overflow: hidden; transition: max-height .5s; } :checked ~ .element { max-height: 666px; } </style> </head> <body> <div class="table"> <div class="td"> <input id="check2" type="checkbox"> <p>个人觉得，display:table-cell最强的应用是可以任意个数列表的等宽效果。</p> <div class="element"> <p>display:table-cell其他一些应用，例如，两栏自适应布局，垂直居 中效果等等都是可以通过其他技术手段模拟出来的，但是，根据列表个数 自动等宽的效果，其他CSS是很难模拟的，尤其当需要兼容IE8浏览器的时 候。</p> <p>然而，此方法也有局限性，就是只能实现单行列表的等分，所以，如 果我们希望列表数目超过一定值的时候变成多行，就需要根据数目不同， 输出不同的DOM结构，仅仅靠CSS有难度。</p> </div> <label for="check2" class="check-in">更多↓</label> <label for="check2" class="check-out">收起↑</label> </div> </div> </body> </html>