首頁  >  文章  >  web前端  >  css三欄佈局的三種實作方式(聖杯佈局、雙飛翼佈局、Flex佈局)

css三欄佈局的三種實作方式(聖杯佈局、雙飛翼佈局、Flex佈局)

不言
不言原創
2018-08-09 11:46:312365瀏覽

這篇文章帶給大家的內容是關於LNMP以源碼的方式記錄環境搭建的過程(詳細),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

效果圖:

css三欄佈局的三種實作方式(聖杯佈局、雙飛翼佈局、Flex佈局)

聖杯佈局

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>

Flex佈局

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實作三欄佈局的三種方式(附程式碼)

如何使用CSS實作過山車loader的動畫效果

#

以上是css三欄佈局的三種實作方式(聖杯佈局、雙飛翼佈局、Flex佈局)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:css實現三欄佈局的三種方式(附程式碼)下一篇:css實現三欄佈局的三種方式(附程式碼)

相關文章

看更多