三列布局-中間固定倆邊自適應-和兩邊固定中間自適應佈局

時間 2019-11-12

標籤佈局中間固定自適應兩邊欄目 CSS 简体版

原文原文鏈接

中間固定倆邊自適應html

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>無標題文檔</title>
 6 </head>
 7 <style>
 8 *{margin:0;padding:0;}
 9 .container{width:100%;height:100%;}
10 .container div{height:400px;text-align:center;font-size:20px;line-height:400px;}
11 .left{width:50%;margin:0px 0px 0px -400px;float:left;}
12 .left .innerbox{background:#ccc;margin:0px 0px 0px 400px;}
13 .right{width:50%;margin:0px 0px 0px -400px;float:left;}
14 .right .innerbox{background:#ccc;margin:0px 0px 0px 400px;}
15 .middle{width:800px;background:#000;float:left;color:#fff;}
16 </style>
17 <body>
18 <div class="container">
19    <div class="left">
20            <div class="innerbox">我是左邊的盒子</div>
21    </div>
22    <div class="middle">中間的盒子</div>
23    <div class="right">
24            <div class="innerbox">我是右邊邊的盒子</div>
25    </div>
26 </div>
27 </body>
28 </html>

兩邊固定中間自適應git

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>無標題文檔</title>
 6 </head>
 7 <style>
 8 *{margin:0;padding:0;}
 9 body{width:100%;height:100%;overflow-x:hidden;background:#ccc;}
10 .container{width:100%;height:800px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;}
11 .left{width:200px;float:left;height:100%;background:yellow;position:relative;z-index:2;}
12 .right{width:200px;float:right;height:100%;background:red;position:relative;z-index:2;}
13 .middle{position:absolute;left:200px;top:0px;padding:10px 200px 0px 10px;background:#000;z-index:1;color:#fff;height:790px;
14 </style>
15 <body>
16 <div class="container">
17    <div class="left">
18            我是左邊固定位寬爲200px的盒子
19    </div>
20    <div class="middle">
21    
22        做爲開源代碼庫以及版本控制系統，Github擁有140多萬開發者用戶。隨着愈來愈多的應用程序轉移到了雲上，Github已經成爲了管理軟件開發以及發現已有代碼的首選方法[1] 。
23 如前所述，做爲一個分佈式的版本控制系統，在Git中並不存在主庫這樣的概念，每一份複製出的庫均可以獨立使用，任何兩個庫之間的不一致之處均可以進行合併。
24 GitHub能夠託管各類git庫，並提供一個web界面，但與其它像 SourceForge或Google Code這樣的服務不一樣，GitHub的獨特賣點在於從另一個項目進行分支的簡易性。爲一個項目貢獻代碼很是簡單：首先點擊項目站點的「fork」的按鈕，而後將代碼檢出並將修改加入到剛纔分出的代碼庫中，最後經過內建的「pull request」機制向項目負責人申請代碼合併。已經有人將GitHub稱爲代碼玩家的MySpace。
25 在GitHub進行分支就像在Myspace（或Facebook…）進行交友同樣，在社會關係圖的節點中不斷的連線。
26 GitHub項目自己天然而然的也在GitHub上進行託管，只不過在一個私
27 
28 有的，公共視圖不可見的庫中。開源項目能夠免費託管，但私有庫則並不如此。Chris Wanstrath，GitHub的開發者之一，確定了經過付費的私有庫來在財務上支持免費庫的託管這一計劃。
29 是的，咱們正是這麼計劃的。經過與客戶的接洽，開發FamSpam，甚至是開發GitHub自己，GitHub的私有庫已經被證實了物有所值。任何但願節省時間並但願和團隊其它成員同樣遠離頁面頻繁轉換之苦的人士都會從GitHub中得到他們真正想要的價值。
30 在GitHub，用戶能夠十分輕易地找到海量的開源代碼。
31 2版本
32 編輯
33 
34 2012年12月24日，GitLab 4.0 RC2 發佈，開源的 Github克隆。
35 3內幕信息
36 編輯
37 
38 Chris Wanstrath還向記者分享了關於GitHub的一些內幕信息︰
39 GitHub主要用Rails實現。咱們在進行的post-commit集成小應用徹底使用Merb編寫。咱們使用了Python的Pygments來作格式高亮顯示，另外，還用了Ara T. Howard's Bj加上一些Ruby腳原本作咱們的排隊系統。固然，咱們用了Ruby Grit庫來和Git進行交互。
40 GitHub已經有了一組引人注目的特性，除了命令式的庫瀏覽器和一個項目Wiki，GitHub甚至還包括了一個GitHub gem，以使經過shell方式使用GitHub更爲方便。更多的將來特性已經在計劃中︰
41 許多人都但願能有一個條目系統，所以一個簡單的條目系統已經在開發中。此外，正如我前面所言，咱們尚在進行RubyGems服務器和一些以前留出的post-commit鉤子方面的工做。若是你不能或就是不想託管一個你本身的守護進程，你可使用咱們所提供的。
42 咱們還在開發一些特性來幫助公司在使用Github時能夠停留在sync之上。
43 最後，咱們也在進行API發佈方面的工做。咱們很快就會發布一些只讀性的API，隨後是一些很強大的「寫」集成。你可使用API將新的事件發佈到新聞feed中，發消息和作其餘許多很酷的事情。
44 GitHub還沒有設定官方版本的發佈日期，不過估計在三月底（GitHub已經上線，但只能經過邀請註冊）。更多關於GitHub的信息能夠參見GitHub官方網站或GitHub博客。經過GitHub進行代碼管理的開源項目列表也已經能夠查閱。
45    </div>
46    <div class="right">
47            我是右邊固定位寬爲200px的盒子
48    </div>
49 </div>
50 </body>
51 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。