css怎樣實(shí)現(xiàn)DIV高度自適應(yīng)

發(fā)布時(shí)間：2024-03-15

可以添加表格特性。
（推薦教程：css教程）
父級(jí)元素添加屬性 display: table;
子一級(jí)元素添加屬性 display: table-cell;
代碼：
<div class="div-row"> <style type="text/css"> .div-row { width: 400px; border: 1px solid #23527c; display: table; } .div-col { display: table-cell; } </style> <div class="div-col" style="background-color: #28a4c9;"> <p><span>內(nèi)容1</span></p> </div> <div class="div-col" style="background-color: #31b0d5;"> <p><span>內(nèi)容1</span></p> <p><span>內(nèi)容2</span></p> </div> <div class="div-col" style="background-color: #269abc;"> <p><span>內(nèi)容1</span></p> <p><span>內(nèi)容2</span></p> <p><span>內(nèi)容3</span></p> </div> <div class="div-col" style="background-color: #5bc0de;"> <p><span>內(nèi)容1</span></p> <p><span>內(nèi)容2</span></p> <p><span>內(nèi)容3</span></p> <p><span>內(nèi)容4</span></p> <p><span>...</span></p> </div> </div>結(jié)果：