標籤：color ble wrap 實現 margin logs 成功 float href
總結一下雙飛翼布局吧，這個比較經典的布局筆試面試有可能會考。
先把html貼上來
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>雙飛翼布局</title> <link rel="stylesheet" href="test.css"></head><body> <div class="wrap"> <div id="main"> <div id="mainIN"> main </div> </div> <div id="left">left</div> <div id="right">right</div> </div></body></html>
雙飛翼的思路如下:
1、將main的width設為100%，填滿全域；
2、設left的width為30%，讓left覆蓋main的左30%；
3、設right的width為20%，讓right覆蓋right的右20%；
4、讓mainIN的左右邊距分別為30%，20%；
5、雙飛翼成功，最後顯示的是left、mainIN、right三部分；
從其思路能看出來實現雙飛翼的要點有兩個，一是如何讓left和right覆蓋main的左右；二是要讓mainIN空出左右邊距；
這樣我再貼出來css代碼大家看起來就比較明了了
#left,#main,#right{ height: 200px; float: left;}#main{ background-color: blue; width:100%;}#left{ background-color: orange; width:30%; margin-left: -100%;}#right{ background-color: red; width:20%; margin-left: -20%;}#mainIN{ margin: 0 20% 0 30%;}
簡單明了，再說一遍要點：
1、利用float：left讓三塊浮動，讓這三塊有並排的可能；
2、利用margin-left：-x%;讓left和right移到上一行與main同行；
3、margin: 0 20% 0 30%;讓mainIN空出main的左右部分；
4、最後顯示的三部分為left、mainIN、right；
思路記好就行了，代碼並不重要。
html\css --- 雙飛翼布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
