利用CSS的float屬性可以將元素並排，做出三列並排的布局。
如這樣的效果
實現的原理：只要將3個元素設置float屬性，屬性值為left，同時指定不同比例的寬度，及高度。
下面是實現代碼
<!DOCTYPE html>
<html>
<head>
<title>元素並排</title>
<meta charset="UTF-8">
<style type="text/css">
body{margin:0px;padding:0px;}
.column1{
float:left;
width:33.33333%;
background-color:#706fd3;
min-height:800px;
}
div{color:#fff;}
.column2{
float:left;
width:33.33333%;
background-color:#ff793f;
min-height:800px;
}
.column3{
float:left;
width:33.33333%;
background-color:#218c74;
min-height:800px;
}
</style>
</head>
<body>
<h1>軟件開發，成就夢想</h1>
<h2><a href="https://www.liyongzhen.com/">學編程，上利永貞網</a></h2>
<div>
<div class="column1">column1</div>
<div class="column2">column2</div>
<div class="column3">column3</div>
</div>
</body>
</html>
本文轉載自https://www.wangshenghua.com/wiki/css/25d08e3dd686670a36aabaaae8770df1/
已經獲得作者許可，歡迎轉載！