使用table-cell實現三欄佈局
阿新 • • 發佈：2019-02-14
起因是看到了一篇掘金上的文章（點選開啟連結），感覺還有別的實現方式，就動手寫了一下。（ps：當然也可以使用flex）
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用table-cell 實現三欄佈局，左右定寬中間自適應</title> <style> .parent { display: table; width: 100%; } .parent> div { display: table-cell; height: 200px; border: 1px solid red; box-sizing: border-box; } .left { width: 100px; } .right { width: 200px; } </style> </head> <body> <div class="parent"> <div class="left">Left</div> <div class="main">Main</div> <div class="right">Right</div> </div> </body> </html>