兩列（一側定寬，一側自適應）佈局：
<!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>Document</title>
<style>
*{
margin:0;
}
.main{
height:600px;
overflow:hidden;
}
.left{
float: left;
background-color: aquamarine;
width: 500px;
height: 600px;
}
.right{
margin-left:500px;
background-color: cornflowerblue;
height:600px;
}
</style>
</head>
<body>
<div class="main">
<div class="left">航啊時代科技鞍山市打個卡四大金剛了阿斯蘭的就夠了阿</div>
<div class="right">裡克森點選率高家裡四大金剛拉手機端了估計安祿山的價格了啊殭屍臉的價格l</div>
</div>
</body>
</html>
複製程式碼在css佈局中最有名的也是最基礎的佈局當屬“聖盃佈局”和“雙飛翼佈局”，它們屬於三列（左中右）佈局，兩邊定寬，中間自適應，基本可以滿足大部分基礎佈局需求。
聖盃佈局 (三列（左中右）佈局，經測試無誤可以正常使用)：
<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>Document</title>
<style>
*{
margin:0;
}
body{
min-width: 850px;
}
.header {
width: 100%;
height: 100px;
background: red;
}
.container{
padding:0 250px 0 300px;
}
.main,.left,.right{
float: left;
}
.main{
width:100%;
background-color: burlywood;
}
.left{
width:300px;
background-color: crimson;
margin-left:-100%;
position: relative;
left: -300px;
}
.right{
width:250px;
background-color: brown;
height: 600px;
margin-right:-250px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="main">hoahso愛過後好哦好多個傲嬌的攻角度講過奧四大金剛</div>
<div class="left">asdfasd 過後好哦好多個傲嬌的攻角度講過奧四asd</div>
<div class="right">過後好哦好多個傲嬌的攻角度講過奧四過後好哦好多個傲嬌的攻角度講過奧四</div>
</div>
<div class="footer"></div>
</body>
</html>
複製程式碼效果如下：
雙飛翼佈局（三列（左中右）佈局，經測試無誤可以正常使用）：
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #FFFFE0;/*便於觀看加的樣式*/
min-width:1000px;
}
header{
height:30px;
background: gray;
text-align: center;
}
footer{
clear: both;
height:30px;
background: gray;
text-align: center;
}
.middle,.left,.right{
float: left;
}
.middle{
width: 100%;
}
.middle .inside{
margin-left:200px;
margin-right:150px;
background-color: darksalmon;
}
.left{
width: 200px;
background-color: chartreuse;
margin-left:-100%;
}
.right{
width: 150px;
background-color:darkred;
margin-left:-150px;
}
</style>
</head>
<body>
<header>我是雙飛翼頭部區域</header>
<div class="middle">
<div class="inside">b<h1>This is the main content.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<!--文字僅供測試無意義-->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<!--文字僅供測試無意義-->
</div>
</div>
<div class="left"><h2>This is the left sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<!--文字僅供測試無意義-->
</div>
<div class="right">
<h2>This is the right sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan .</p>
<!--文字僅供測試無意義-->
</div>
<footer>我是雙飛翼底部區域</footer>
</body>
</html>
複製程式碼效果如下：
css元素居中：
css元素居中方式多大十幾種，各種思路各種寫法一通秀，簡直舉不勝舉，平常使用中基本只要掌握7，8種就可以應付日常的所有業務要求了，具體就不一一列舉了，掘金的這位總結的比較全面，可以學習一下，css居中大全。
text-align兩端對齊
text-align:justify在佈局使用中也是經常使用的，需要注意的是text-align:justify對第一行內容不起作用，而且只對最後一行之前的行生效，如果你只有一行則需特殊處理。一般慣用的的方法是使用偽元素::after。
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
.contain{
width: 800px;
background-color: red;
text-align: justify;
margin:0 auto;
font-size:0;
}
.contain span{
background-color: yellow;
display: inline-block;
font-size:18px;
}
.contain:after{
content: "";
display: inline-block;
width:100%;
overflow:hidden;
height: 0;
}
</style>
</head>
<body>
<div class="contain">
<span>所有所有所有所有所有</span>
<span>框架所有所有所有</span>
<span>vue所有所有所有</span>
<span>原生JS所有所有</span>
</div>
</body>
</html>
複製程式碼效果如下：
另外一種是使用text-align-last:justify,MDN上面顯示目前的瀏覽器都支援，但是該屬性經過個人測試發現ie11和edge瀏覽器都不支援，解決方法如下：
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
.contain{
width: 800px;
margin:0 auto;
background-color: red;
text-align-last: justify;
}
.ceshi{
text-align: justify;
}
.contain span{
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<div class="contain">
<div class="ceshi">
<span>所有</span>
<span>框架</span>
<span>vue</span>
<span>原生JS</span>
</div>
</div>
</body>
</html>
複製程式碼效果如下：
與偽元素：after方法相比，這個方法多了一層div進行包含巢狀，並設定該div樣式為text-align: justify;即可在iell和edge瀏覽器下正常顯示，具體原理暫不清楚，
這兩種方法可以解決最後一行元素不對齊問題。