方法一：使用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>