CSS3多列
阿新 • • 發佈：2018-11-14
定義：
引數：
code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>columns</title> <style type="text/css"> body { font: 14px/1.5 georgia, serif, sans-serif; } p { margin: 0; padding: 5px 10px; background: #eee; } h1 { margin: 10px 0; font-size: 16px; } .test { width: 800px; border: 10px solid #000; -webkit-columns: 200px 3; -moz-columns: 200px 3; columns: 200px 3; } .test2 { border: 10px solid #000; -webkit-columns: 200px; -moz-columns: 200px; columns: 200px; } </style> </head> <body> <h1>列數及列寬固定:</h1> <div class="test"> <p>慕課網是垂直的網際網路IT技能免費學習網站。以獨家視訊教程、線上程式設計工具、學習計劃、問答社群為核心特色。在這裡，你可以找到最好的網際網路技術牛人，也可以通過免費的線上公開視訊課程學習國內領先的網際網路IT技術。</p> <p>慕課網課程涵蓋前端開發、PHP、Html5、Android、iOS、Swift等IT前沿技術語言，包括基礎課程、實用案例、高階分享三大型別，適合不同階段的學習人群。以純乾貨、短視訊的形式為平臺特點，為在校學生、職場白領提供了一個迅速提升技能、共同分享進步的學習平臺。</p> <p>慕課網秉承“開拓、創新、公平、分享”的精神，將網際網路特性全面的應用在教育領域，致力於為教育機構及求學者打造一站式互動線上教育品牌。</p> </div> <h1>列寬固定，根據容器寬度液態分佈列數:</h1> <div class="test2"> <p>慕課網是垂直的網際網路IT技能免費學習網站。以獨家視訊教程、線上程式設計工具、學習計劃、問答社群為核心特色。在這裡，你可以找到最好的網際網路技術牛人，也可以通過免費的線上公開視訊課程學習國內領先的網際網路IT技術。</p> <p>慕課網課程涵蓋前端開發、PHP、Html5、Android、iOS、Swift等IT前沿技術語言，包括基礎課程、實用案例、高階分享三大型別，適合不同階段的學習人群。以純乾貨、短視訊的形式為平臺特點，為在校學生、職場白領提供了一個迅速提升技能、共同分享進步的學習平臺。</p> <p>慕課網秉承“開拓、創新、公平、分享”的精神，將網際網路特性全面的應用在教育領域，致力於為教育機構及求學者打造一站式互動線上教育品牌。</p> </div> </body> </html>