1、多列布局
column-count：指定列数；
column-fill：指定内容在列与列之间的分布方式；balance：确保不同列之间的长度差异尽可能的小；auto：按照循序填充列；
column-gap：列之间的距离；
column-width：列宽；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>多列布局</title> 6 <style> 7 p{ 8 column-count: 3; 9 column-fill: balance; 10 column-rule: medium solid orange; 11 column-gap: 1.5em; 12 -moz-column-count: 3; 13 -moz-column-fill: balance; 14 -moz-column-rule: medium solid orange; 15 -moz-column-gap: 1.5em; 16 } 17 img{ 18 float: left; 19 border: medium double black; 20 background-color: lightgray; 21 padding: 2px; 22 margin: 2px; 23 } 24 </style> 25 </head> 26 <body> 27 <p> 28 Lorem ipsum dolor sit amet, consectetur adipisicing 29 elit. Ab animi laboriosam nostrum consequatur fugiat 30 <img src="img/banana.jpg" alt="banana"> 31 at, labore praesentium modi, quasi dolorum debitis 32 reiciendis facilis, dolor saepe sint nemo, earum 33 molestias quas. 34 <img src="img/banana.jpg" alt="banana"> 35 Lorem ipsum dolor sit amet, consectetur adipisicing 36 elit. Ab animi laboriosam nostrum consequatur fugiat 37 at, labore praesentium modi, quasi dolorum debitis 38 reiciendis facilis, dolor saepe sint nemo, earum 39 molestias quas.Lorem ipsum dolor sit amet, consectetur 40 adipisicingelit. Ab animi laboriosam nostrum consequatur 41 fugiatat, labore praesentium modi, quasi dolorum debitis 42 reiciendis facilis, dolor saepe sint nemo, earum molestias quas. 43 </p> 44 </body> 45 </html>
2、弹性盒布局
box-flex：指定元素的可伸缩性；
box-align：如何处理多余的垂直空间；
box-pack：若定义了可伸缩元素的最大尺寸，则当其达到最大尺寸的时候，多余空间如何处理；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>flexbox</title> 6 <style> 7 p{ 8 width: 150px; 9 /*max- 250px;*/ 10 border: medium solid black; 11 background-color: lightgray; 12 margin: 2px; 13 } 14 #container{ 15 display: -webkit-box; 16 /*-webkit-box-pack: center;*/ 17 } 18 #first{ 19 -webkit-box-flex: 3; 20 } 21 #second{ 22 -moz-box-flex: 1; 23 -webkit-box-flex: 1; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="container"> 29 <p id="first"> 30 Lorem ipsum dolor sit amet, consectetur adipisicing 31 elit. Ab animi laboriosam nostrum consequatur fugiat 32 at, labore praesentium modi, quasi dolorum debitis 33 reiciendis facilis, dolor saepe sint nemo, earum 34 molestias quas.Lorem ipsum dolor sit amet, consectetur 35 adipisicingelit. Ab animi laboriosam nostrum consequatur 36 fugiatat, labore praesentium modi, quasi dolorum debitis 37 reiciendis facilis, dolor saepe sint nemo, earum molestias quas. 38 </p> 39 <p id="second"> 40 Lorem ipsum dolor sit amet, consectetur adipisicing 41 elit. Ab animi laboriosam nostrum consequatur fugiat 42 at, labore praesentium modi, quasi dolorum debitis 43 reiciendis facilis, dolor saepe sint nemo, earum 44 molestias quas. 45 </p> 46 <p id="third"> 47 Lorem ipsum dolor sit amet, consectetur adipisicing 48 elit. Ab animi laboriosam nostrum consequatur fugiat 49 at, labore praesentium modi, quasi dolorum debitis 50 reiciendis facilis, dolor saepe sint nemo, earum 51 molestias quas.Lorem ipsum dolor sit amet, consectetur adipisicing 52 elit. Ab animi laboriosam nostrum consequatur fugiat 53 </p> 54 </div> 55 </body> 56 </html>
3、表格布局
优点：能自动调整单元格的大小；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格布局</title> 6 <style> 7 #table{ 8 display: table; 9 } 10 div.row{ 11 display: table-row; 12 background-color: lightgray; 13 } 14 p{ 15 display: table-cell; 16 border: thin solid black; 17 padding: 15px; 18 margin: 15px; 19 } 20 img{ 21 float: left; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="table"> 27 <div class="row"> 28 <p> 29 Lorem ipsum dolor sit amet, consectetur adipisicing 30 elit. Ab animi laboriosam nostrum consequatur fugiat 31 at, labore praesentium modi, quasi dolorum debitis 32 reiciendis facilis, dolor saepe sint nemo, earum 33 molestias quas.Lorem ipsum dolor sit amet, consectetur 34 adipisicingelit. Ab animi laboriosam nostrum consequatur 35 fugiatat, labore praesentium modi, quasi dolorum debitis 36 reiciendis facilis, dolor saepe sint nemo, earum molestias quas. 37 </p> 38 <p> 39 Lorem ipsum dolor sit amet, consectetur adipisicing 40 elit. Ab animi laboriosam nostrum consequatur fugiat 41 at, labore praesentium modi, quasi dolorum debitis 42 reiciendis facilis, dolor saepe sint nemo, earum 43 molestias quas. 44 </p> 45 <p> 46 Lorem ipsum dolor sit amet, consectetur adipisicing 47 elit. Ab animi laboriosam nostrum consequatur fugiat 48 at, labore praesentium modi, quasi dolorum debitis 49 reiciendis facilis, dolor saepe sint nemo, earum 50 molestias quas.Lorem ipsum dolor sit amet, consectetur adipisicing 51 elit. Ab animi laboriosam nostrum consequatur fugiat 52 </p> 53 </div> 54 <div class="row"> 55 <p> 56 This is a banana.<img src="img/banana.jpg" alt="banana" /> 57 </p> 58 <p> 59 This is a banana.<img src="img/banana.jpg" alt="banana" /> 60 </p> 61 <p> 62 No picture here. 63 </p> 64 </div> 65 </div> 66 </body> 67 </html>