1NetMedia_Blog
Home
Html
ASP/.NET
PHP
APP
JS
Ajax
Flash
SEO
Document
Design
Data
Private
<< asp获取远程网站源码并显示
类别:
Html
CSS垂直布局自适应高度解决方案 >>
css三栏布局大全(7种布局方式)
[ 日期: 2019-06-19 6:56:11 PM | 作者:
admin
| 来源:
本站整理
| 人气:309 |
|
] 字号: 【
大
中
小
】
急速栏目链接:
标签:
浮动布局
|
绝对定位布局
|
flex弹性盒子布局
|
圣杯布局
|
双飞翼布局
|
表格布局
|
网格布局
|
三栏布局,三栏就是三个栏目板块放在一行,左右定宽,中间自适应。
左右宽度300px,中间宽度自适应。(部分中间栏要放在文档流前面优先渲染)
【示例】
<style type="text/css"> * {margin: 0;padding: 0;} .wrap{width: 80%; height: 150px; margin: 0px auto 20px; text-align: center; line-height: 100px; color: #fff;} .wrap .middle{text-align: left; overflow: auto;} .wrap .middle h2{text-align: center; margin: 10px 0; padding: 0; line-height: 30px;} .wrap .middle p{line-height: 20px; font: 12px;} /* 浮动布局 */ .layout1{height:100%;} .layout1>div{height: 100%;} .layout1 .left,.layout1 .right{width: 300px; background: #f00;} .layout1 .middle{background: #00f;} .layout1 .left{float: left;} .layout1 .right{float: right;} /* 绝对定位布局 */ .layout2{height:100%; position: relative;} .layout2>div{top:0; bottom: 0; position: absolute;} .layout2 .middle{left:300px; right:300px; background: #00f;} .layout2 .left,.layout2 .right{width: 300px; background: #f00;} .layout2 .left{left: 0;} .layout2 .right{right: 0;} /* flex弹性盒子布局 */ .layout3{height:100%; display: flex; flex-direction: row/* 默认值 */;} .layout3>div{height: 100%;} .layout3 .middle{flex:1; background: #00f;} .layout3 .left,.layout3 .right{flex-basis: 300px; background: #f00;} .layout3 .left{order: -1;} /* 圣杯布局*/ .layout4{height: 100%; padding: 0 300px;} .layout4>div{height: 100%; position: relative; float: left;} .layout4 .left,.layout4 .right{width:300px; background: #f00;} .layout4 .middle{width: 100%; background: #00f;} .layout4 .left{margin-left: -100%; left: -300px;} .layout4 .right{margin-left: -300px; right: -300px;} /* 双飞翼布局 */ .layout5{height: 100%;} .layout5>div{height: 100%; float: left;} .layout5 .middle-out{width: 100%;} .layout5 .left,.layout5 .right{width:300px; background: #f00;} .layout5 .middle{height:100%; margin:0 300px; background: #00f;} .layout5 .left{margin-left: -100%;} .layout5 .right{margin-left: -300px;} /* 表格布局 */ .layout6{height: 100%; width: 100%; display: table;} .layout6>div{display: table-cell;} .layout6 .left,.layout6 .right{width:300px; background: #f00;} .layout6 .middle{background: #00f;} /* 网格布局 */ .layout7{display: grid;/* 设置高度 */grid-template-rows: 100%;/* 设置列数 */grid-template-columns: 300px auto 300px;} .layout7 .left,.layout7 .right{background: #f00;} .layout7 .middle{background: #00f;} </style> <!-- 浮动布局 --> <div class="wrap"> <div class="layout1"> <div class="left">left</div> <div class="right">right</div><!-- 右栏部分要写在中间内容之前 --> <div class="middle"><h2>浮动布局</h2><p>这种布局方式,dom结构必须是先写浮动部分,然后再中间块,否则右浮动块会掉到下一行。 浮动布局的优点就是比较简单,兼容性也比较好。但浮动布局是有局限性的,浮动元素脱离文档流,要做清除浮动,这个处理不好的话,会带来很多问题,比如父容器高度塌陷等。</p></div> </div> </div> <!-- 绝对定位布局 --> <div class="wrap"> <div class="layout2"> <div class="left">left</div> <div class="middle"><h2>绝对定位布局</h2><p>绝对定位布局优点就是快捷,设置很方便,而且也不容易出问题。缺点就是,容器脱离了文档流,后代元素也脱离了文档流,高度未知的时候,会有问题,这就导致了这种方法的有效性和可使用性是比较差的。</p></div> <div class="right">right</div> </div> </div> <!-- flex弹性盒子布局 --> <div class="wrap"> <div class="layout3"> <div class="middle"><h2>flex弹性盒子布局</h2><p>flexbox布局是css3里新出的一个,它就是为了解决上述两种方式的不足出现的,是比较完美的一个。目前移动端的布局也都是用flexbox。 flexbox的缺点就是IE10才开始支持,但是IE10的是-ms形式的。</p></div> <div class="left">left</div> <div class="right">right</div> </div> </div> <!-- 圣杯布局 --> <div class="wrap"> <div class="layout4"> <div class="middle"><h2>圣杯布局</h2><p>圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念,相当于中间那栏是圣杯主体,left和right俩栏是圣杯耳朵;用到定位的属性关系加上margin-left负值的特性来完成。<br /> 和双飞翼布局异同:他们解决办法一半是相同的,都是使用float浮动,利用了margin-left负值的特性,让他们移动到上一行,使三栏并排,形成三栏布局;不同的是双飞翼布局改变了html结构,多用了一个div,少用4个css属性,减少了相对定位的麻烦,比圣杯布局思路简单一点。</p></div> <div class="left">left</div> <div class="right">right</div> </div> </div> <!-- 双飞翼布局 --> <div class="wrap"> <div class="layout5"> <div class="middle-out col"> <div class="middle"><h2>双飞翼布局</h2><p>双飞翼布局据说是玉伯大大提出来的,始于淘宝UED,双飞翼布局用来诠释三栏布局就是把三栏布局比作一个大鸟,中间自适应那栏是鸟的身体,left和right那俩个栏是他们的翅膀;<br /> 最开始他们都是float:left,所以最开始margin-left是0;负的margin-left会让元素沿文档流向左移动,如果负的值较大,比如说-100%,相当于直接向左移动出100%一整行的距离,因为left左边是父元素边框,所以直接跳到上一行左移,移动100%距离相当于直接从上一行的末尾开始左移,移到上一行的开头,right在上一行末尾是因为负值300px,刚好是right的宽度,所以他从上一行的末尾开始向左移移动了300px;如果加大right的负值,他会继续向左移。</p></div> </div> <div class="left col">left</div> <div class="right col">right</div> </div> </div> <!-- 表格布局 --> <div class="wrap" style="height: 200px;"> <div class="layout6"> <div class="left">left</div> <div class="middle"><h2>表格布局</h2><p>表格布局的兼容性很好,在flex布局不兼容的时候,可以尝试表格布局。当内容溢出时会自动撑开父元素。<br /> 表格布局也是有缺陷:①无法设置栏边距;②对seo不友好;③当其中一个单元格高度超出的时候,两侧的单元格也是会跟着一起变高的,然而有时候这并不是我们想要的效果。</p></div> <div class="right">right</div> </div> </div> <!-- 网格布局 --> <div class="wrap"> <div class="layout7"> <div class="left">left</div> <div class="middle"><h2>网格布局</h2><p>CSS Grid是创建网格布局最强大和最简单的工具。就像表格一样,网格布局可以让Web设计师根据元素按列或行对齐排列,但他和表格不同,网格布局没有内容结构,从而使各种布局不可能与表格一样。例如,一个网格布局中的子元素都可以定位自己的位置,这样他们可以重叠和类似元素定位。<br /> 但网格布局的兼容性不好。IE10+上支持,而且也仅支持部分属性。</p></div> <div class="right">right</div> </div> </div> <p> </p>
复制代码
另存代码
提示:您可以先修改部分代码再运行
收藏本文
复制地址
打印本文
关闭页面
没有相关评论
发表评论
请先注册,才能发表评论!
- 注册 -
用户登陆
用户:
密码:
验证:
日志搜索
标签
主题
评论
本站
网络
相关信息
网络收藏夹
(19)
资源共享
(17)
留言本
(17)
站点日历
<<
<
2021
-
04
>
>>
日
一
二
三
四
五
六
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
最近日志
- CSS垂直布局自适应高度解...
- css三栏布局大全(7种布局...
- asp获取远程网站源码并显...
- ES6中三个点扩展运算符(s...
- 获取鼠标点击元素
- Js中Array对象的reduce方...
- Chrome Ajax 跨域设置
- 一些有用的JS正则表达式
- h5在光标位置插入内容,点...
- js常见的内存泄漏及解决方...
最近评论
- 我的是在判断之后取回的数...
- 谢谢啦。。。。帮你顶顶
- 回去就去试试 不错
- http://home.donews.com/...
- 我帮你补充一些
- 兄弟,最后一个TABLE...
- 请博主注明: 全部来自:...
- 吊啊~~
- 很好
- 表面看只是个 玩具头而已...
站点统计
日志: 1491 篇
评论: 54 篇
引用: 0 个
会员: 148 人
访问:33454233 次
建立: 2005-03-30
友情链接
本站logo,欢迎交换链接!
设为首页
-
加入收藏
-
广告服务
-
友情链接
-
站长信箱
-
在线交流
-
繁體中文
版权所有 © 2006-2007
1netmedia.cn
, All Rights Reserved. 推荐使用1024*768分辨率浏览本站
本站博客技术支持 2S-blog: http://www.2s-space.com/
湘ICP备08104616号 页面载入时间:0.078125 秒