這篇文章帶給大家的內容是關於LNMP以源碼的方式記錄環境搭建的過程(詳細),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
效果圖:
nbsp;html> <title>圣杯</title> <style> .container{ padding:0 200px 0 180px; height:100px; } .left{ float:left; width:180px; height:100px; margin-left:-100%; background:red; position:relative; left:-180px; } .main{ float:left; width:100%; height:100px; background:blue; } .right{ float:left; width:200px; height:100px; margin-left:-200px; background:green; position:relative; right:-200px; } </style> <div> <div>middle</div> <div>left</div> <div>right</div> <h3>雙飛翼佈局</h3> <pre class="brush:php;toolbar:false">nbsp;html> <meta> <title>双飞翼</title> <style> .main{ float:left; width:100%;/*左栏上去到第一行*/ height:100px; background:blue; } .left{ float:left; width:180px; height:100px; margin-left:-100%; background:red; } .right{ float:left; width:200px; height:100px; margin-left:-200px; background:green; } </style> <div></div> <div>left</div> <div>right</div>
nbsp;html> <meta> <title>Flex</title> <style> .flex { display: flex; flex-flow: row; } .left{ width: 180px; height: 100px; background-color: red; } .main{ flex: 1; height: 100px; background-color: blue; } .right { width: 200px; height: 100px; background-color: green; } </style> <div> <div>left</div> <div>middle</div> <div>right</div> </div>
如果main要給左邊的left模組和右邊的right模組都讓出一定寬度來的話,只有padding:0 100px 0 200px;或margin:0 100px 0 200px;這兩種方式!
這兩條路線:
如果走margin路線, 一路走下去,你會發現最後你寫出的程式碼就是雙飛翼;
如果走padding路線,那就是聖杯!
相關文章推薦:
#以上是css三欄佈局的三種實作方式(聖杯佈局、雙飛翼佈局、Flex佈局)的詳細內容。更多資訊請關注PHP中文網其他相關文章!