等高多列布局
阿新 • • 發佈：2018-10-31
方法一：使用flex佈局方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>等高多列布局</title> <style> .container { width: 80%; margin: 50px auto; display: flex; align-items: stretch; background-color: #ddd; overflow: hidden; } .columns { width: 20%; margin: 2.5%; flex: 1; background-color: aqua; } .columns:nth-type-of(2n) { background-color: #f90; } </style> </head> <body> <div class="container"> <div class="columns">美國財政部週一公佈的報告顯示，在截至9月份的12個月中，預算赤字同比飆升17%，原因在於支出增長了3.2%，而收入僅增長0.4%</div> <div class="columns">美國政府的財政年度從每年的10月1日開始，至次年的9月30日結束</div> <div class="columns">如果國會無法平衡預算，應當禁止議員再次當選。</div> <div class="columns">這份重要資料“打臉”特朗普：上任後首個完整財年 預算赤字飆升至6年新高,美國政府週一（10月15日）公佈的資料顯示，在特朗普（Donald Trump）就任美國總統的第一個完整財年，美國的預算赤字增長至7，790億美元，創下2012年以來最高水平。去年同期為6658億美元。經濟學家普遍認為，美國國會去年底通過的大規模減稅法案和特朗普政府大幅增加聯邦政府支出是導致美國赤字增加的主要原因。</div> </div> </body> </html>
方法二：使用負margin和padding香衝動法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>等高多列布局</title> <style> .container { width: 80%; margin: 50px auto; background-color: #ddd; } .columns { width: 20%; margin: 2.5%; background-color: aqua; padding-bottom: 5000px; margin-bottom: -5000px; float: left; } .columns:nth-type-of(2n) { background-color: #f90; } </style> </head> <body> <div class="container"> <div class="columns">美國財政部週一公佈的報告顯示，在截至9月份的12個月中，預算赤字同比飆升17%，原因在於支出增長了3.2%，而收入僅增長0.4%</div> <div class="columns">美國政府的財政年度從每年的10月1日開始，至次年的9月30日結束</div> <div class="columns">如果國會無法平衡預算，應當禁止議員再次當選。</div> <div class="columns">這份重要資料“打臉”特朗普：上任後首個完整財年 預算赤字飆升至6年新高,美國政府週一（10月15日）公佈的資料顯示，在特朗普（Donald Trump）就任美國總統的第一個完整財年，美國的預算赤字增長至7，790億美元，創下2012年以來最高水平。去年同期為6658億美元。經濟學家普遍認為，美國國會去年底通過的大規模減稅法案和特朗普政府大幅增加聯邦政府支出是導致美國赤字增加的主要原因。</div> </div> </body> </html>
方法3：table佈局實現：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>等高多列布局</title> <style> .container { width: 80%; margin: 50px auto; background-color: #ddd; display: table; padding: 30px; } .columns { width: 20%; margin: 2.5%; background-color: aqua; display: table-cell;/* display： table-cell;的元素，margin會失效，所以間隔要價格子元素*/ border: 2px solid #ddd; } .columns:nth-type-of(2n) { background-color: #f90; } .mg { margin: 10px; } </style> </head> <body> <div class="container"> <div class="columns"> <div class="mg"> 美國財政部週一公佈的報告顯示，在截至9月份的12個月中，預算赤字同比飆升17%，原因在於支出增長了3.2%，而收入僅增長0.4% </div> </div> <div class="columns"> <div class="mg"> 美國政府的財政年度從每年的10月1日開始，至次年的9月30日結束 </div> </div> <div class="columns"> <div class="mg"> 如果國會無法平衡預算，應當禁止議員再次當選。 </div> </div> <div class="columns"> <div class="mg"> 這份重要資料“打臉”特朗普：上任後首個完整財年 預算赤字飆升至6年新高,美國政府週一（10月15日）公佈的資料顯示，在特朗普（Donald Trump）就任美國總統的第一個完整財年，美國的預算赤字增長至7，790億美元，創下2012年以來最高水平。去年同期為6658億美元。經濟學家普遍認為，美國國會去年底通過的大規模減稅法案和特朗普政府大幅增加聯邦政府支出是導致美國赤字增加的主要原因。 </div> </div> </div> </body> </html>
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>等高多列布局</title>
<style>
.container {
width: 80%;
margin: 50px auto;
background-color: #ddd;
overflow: hidden;
}
.left,
.right {
width: 50%;
float: left;
}
.right {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="left">此處應該有很多的文字很少</div>
<div class="right">
此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多
</div>
</div>
</body>
</html>5、給父級設定漸變：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>等高多列布局</title>
<style>
.container {
width: 80%;
margin: 50px auto;
background-image:linear-gradient(90deg, #ddd 50%, #f90 0);
overflow: hidden;
}
.left,
.right {
width: 50%;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="left">此處應該有很多的文字很少</div>
<div class="right">
此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多此處應該有很多的文字很多很多
</div>
</div>
</body>
</html>