css3新引入的flex在某些情況下布局非常實用
因為它是彈性盒子所以自適應效果會很棒
不過各項布局方案還是各有優劣
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex三列布局</title> <style> *{ margin: 0; padding: 0; } #head{ width: 100%; height: 100px; border: 1px solid; background-color: red; } #content{ width: 100%; border: 1px solid; display: flex; } #content>.item:nth-child(1){ order: 2; word-wrap:break-word; flex: 1; } #content>.item:nth-child(2){ min-width: 300px; order: 1; } #content>.item:nth-child(3){ min-width: 300px; order: 3; } #footer{ width: 100%; height: 100px; border: 1px solid; background-color: blue; } </style> </head> <body> <div id="head"></div> <div id="content"> <div class="item">middlemiddlemiddlemiddlemiddlemiddlem ddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddle middlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemi dlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddl emiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemi ddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemid dlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlem iddlemiddlemiddlemiddlemiddlemiddlemiddl emiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemidd le middlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemi ddlemiddlemiddlemiddle</div> <div class="item">left</div> <div class="item">right</div> </div> <div id="footer"></div> </body> </html>
實現的是基本版的三列布局
很簡單