css之页面三列布局
左右两边宽度固定,中间自适应
左右两边绝对定位
可以利用浮动,左边的左浮动,右边的右浮动
css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814.html)
table布局
grid布局 (https://www.w3cplus.com/css3/line-base-placement-layout.html)
第一种方法:左右两边绝对定位
html代码
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
css代码
.left {
height: 200px;
width: 300px;
background-color: blue;
position: absolute;
left: ;
top:
}
.right {
width:300px;
height: 200px;
background-color: red;
position: absolute;
right: ;
top:;
}
.middle{
height: 300px;
background-color: yellow;
margin: 300px;
}
优点:快捷,不容易出问题
缺点:子元素也脱离的文档流,这样有效性就相对还说比较差
如果高度不固定, 两边的模块不会随中间的部分改变而改变
第二种方法:可以利用浮动,左边的左浮动,右边的右浮动
css部分
#left {
width: 100px;
float: left;
background: green;
height: 300px;
} #right {
width: 100px;
float: right;
background: red;
height: 300px;
} #middle {
margin-right: 110px;
margin-left: 110px;
height: 300px;
background: #ccc;
}
html部分;
<div id="left">
</div>
<div id="right">
</div>
<div id="middle">
</div>
优点:兼容性好(处理好清除浮动,和周边元素的关系)
缺点:float后脱离文档流,处理不好会有很多问题,这个是这种排版的局限性。
如果高度不固定,不做修改,此方法不再好使,因为中间的部分会超出两边的部分。
第三种方法:css3 flex布局
css:
.content{
display:flex;
}
.left {
height: 200px;
width: 300px;
background-color:red
}
.right {
width:300px;
height: 200px;
background-color:blue;
}
.middle{
height: 300px;
background-color: yellow;
flex:;
}
html
<div class="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
优点:吸收了前面两个的优点
缺点:兼容性问题
如果高度不固定,两边的部分会随着中间部分变高。
第四种方法:table布局
css
.content{
display:table;
width:100%;
height: 100px;
}
.content>div{
display: table-cell;
}
.left {
height: 200px;
width: 300px;
background-color:red
}
.right {
width:300px;
height: 200px;
background-color:blue;
}
.middle{
height: 300px;
background-color: yellow;
}
html:
<div class="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
优点:兼容性特别好,例如ie8
缺点:同时增高的高度
如果高度不固定,两边的部分会随着中间部分变高。
第五种方法:grid布局
css:
.content{
display:grid;
width:100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
} .left {
height: 200px;
width: 300px;
background-color:red
}
.right {
width:300px;
height: 200px;
background-color:blue;
}
.middle{
height: 300px;
background-color: yellow;
}
html
<div class="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
如果高度不固定,所有的模块不会所内容增加而变高
上下固定中间自适应解决办法:http://www.cnblogs.com/pigtail/archive/2012/11/25/2787508.html
css之页面三列布局的更多相关文章
- css之页面三列布局之左右两边宽度固定,中间自适应
左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...
- css之页面三列布局之左右上下高度固定,中间自适应
第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...
- HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- CSS如何实现三列布局?如果两端固定、中间是自适应又该如何做?
使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- CSS设计一个三列布局的页面
探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要.无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset. 01 /* 02 KISSY CSS Rese ...
- css实现三列布局,左右固定值,中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
随机推荐
- windows下IIS+PHP解决大文件上传500错问题
linux下改到iis+php后,上传大于2M就出500错,改了php.ini中的upload_max_filesize也不行,最后解决如下: 第一步:修改php.ini 上传大小限制 (以上传500 ...
- Android学习笔记(十三)
Android中的广播机制 Android提供了一套完整的API,允许应用程序自由地发送和接受广播. 发送广播的方法借助于Intent,接受广播的方法需要广播接收器(BroadcastsReceive ...
- SparkConf加载与SparkContext创建(源码阅读一)
即日起开始spark源码阅读之旅,这个过程是相当痛苦的,也许有大量的看不懂,但是每天一个方法,一点点看,相信总归会有极大地提高的.那么下面开始: 创建sparkConf对象,那么究竟它干了什么了类,从 ...
- OAF_开发系列23_实现OAF数据格式CSS和CSS库(案例)
20150716 Created By BaoXinjian
- 关于CSS学习的第一章
1.CSS三种书写的方式:嵌入式.外链式.行内式 嵌入式就是将CSS写入在<style></style> 外链式将外面的CSS文件通过HTML中的标记链接过来:<link ...
- ActiveMQ与WebSocket的结合应用
前段时间无意之中看到了WebSocket这样东西,发现自己真的是火星了.早在11年就有的东西,一直都不知道. 研究了一番之后感觉还是比较好用的. 我很少做Socket开发,但是曾经由于项目的原因,用过 ...
- html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
- 字典树的C++实现
此次代码使用了诸多新鲜玩意,比如自动类型推断,模板类等等,感觉真的超级好玩啊. 自己做了一个简易的测试,程序的健壮性什么的还是比较差的,此程序留待以后进行功能补全. #pragma once #inc ...
- XF 文档 - Element Framework Doc
配置篇 Chapter Configuration Schema篇 Chapter Schema 查询篇 Chapter Querying Data 数据更改及验证篇 Chapter Data Mod ...
- CacheManager COUNTER
CacheClient.AddOrUpdate("COUNTER", 0, v => Convert.ToInt32(v) + 1);