三列布局-中间固定俩边自适应-和两边固定中间自适应布局

中间固定俩边自适应

 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>

两边固定中间自适应

 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>

转载于:https://www.cnblogs.com/ollie-sk8/p/4106007.html

三列布局-中间固定俩边自适应-和两边固定中间自适应布局相关推荐

在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
css三列布局--两边固定中间自适应和中间固定两边自适应
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
html三列布局中间固定,常见的三列布局（左右固定宽度，中间自适应）
实现css中的三列布局,左右固定宽度,中间自适应.三列布局方式的关键是怎么样才能使得在伸缩浏览器窗口的时候让中间的子元素宽度改变.比较常见的实现方案是:定位,浮动,css3中新特性flex布局,以及流 ...
HTML变列自适应布局三行,CSS三行三列DIV高度自适应的设置
上一篇博客里引用了www.52css.com里的一篇关于使用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100 ...
html 三列布局（两列自适应，一列固定宽度）
不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果. 不多少代码奉上: CSS样式代码: /******************** *公共标签样式 ...
[html] 写一个三栏布局，两边固定，中间自适应
[html] 写一个三栏布局,两边固定,中间自适应 position + marginfloat + marginflex 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
[css] 使用flex实现三栏布局，两边固定，中间自适应
[css] 使用flex实现三栏布局,两边固定,中间自适应同意里面的一个回答,现在有很多简单的实现方式,传统的这个也是一种hack的方式,真的没必要去追究了,但是核心知识点可以掌握.1.把 cent ...

三列布局-中间固定俩边自适应-和两边固定中间自适应布局

三列布局-中间固定俩边自适应-和两边固定中间自适应布局相关推荐

最新文章

热门文章