雙飛翼布局
雙飛翼布局是css的經典布局
實作雙飛翼布局的目的：
為了實作一個兩側寬度固定，中間寬度自適應的三欄布局
html部分
<body>
<div class="top">top</div>
<div class="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="bottom">bottom</div>
</body>
css部分
*{
margin: 0;
padding: 0;
}
html,body,.main{
height: 100%;
}
.top{
background-color: rgb(248, 20, 20);
width: 100%;
height: 200px;
}
.left{
background-color: lightskyblue;
float: left;
width: 200px;
height:100%;
}
.center{
background-color: yellow;
float: left;
width:calc(100% - 400px);
height:100%;
}
.right{
background-color: rgb(119, 21, 95);
float: left;
width: 200px; ;
height:100%;
}
.bottom{
background-color: whitesmoke;
height: 200px;
width: 100%;
}
由代碼可見
整體大的分成了三個大塊top、bottom、main三個部分，其次是將main模塊再分成了三個部分——right、center、left，且兩側的寬度是固定的，中間寬度自適應，
實作效果
部分顯示
這里的高寬都是可以在css里面進行修改，都可以根據自己的需求自行修改，
以上為止，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/266388.html
標籤：其他
上一篇：2021/03/03之Vue路由params、query引數丟失解決
下一篇：jQuery.事件