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 ...
随机推荐
- 【原创】刚刚发现的SVN的几个有用的功能
一.可看到一个文件/目录跨Branch的所有变更历程 二.SVN可自动利用Word2013的审阅功能对比docx文档
- Android Studio--学习系列(2)
1.Failed to load the LayoutLib: com/android/layoutlib/bridge/Bridge : Unsupported major.minor versio ...
- mysql授权登录用户
创建用户并授权 CREATE USER 'voctrals'@'%' IDENTIFIED BY 'some_password'; 允许远程访问 GRANT ALL PRIVILEGES ON *.* ...
- 认识UML类图元素
在Visio里,包和类的关系是包含关系,将类拖入包的文件夹之后,关系就建立了,二元关联符号可以设置为:聚合.合成.接口:空心圆+直线(唐老鸭类实现了‘讲人话’):依赖:虚线+箭头(动物和空气的关系): ...
- 获取广告标识符ifad
#import <AdSupport/ASIdentifierManager.h> NSString *adId =[[[ASIdentifierManager sharedManager ...
- [综] Sparse Representation 稀疏表示 压缩感知
稀疏表示 分为 2个过程:1. 获得字典(训练优化字典:直接给出字典),其中字典学习又分为2个步骤:Sparse Coding和Dictionary Update:2. 用得到超完备字典后,对测试数据 ...
- GitBook制作电子书详细教程(命令行版)
GitBook 是一款基于 Node.js 开发的开源的工具,可以通过命令行的方式创建电子书项目,再使用 MarkDown 编写电子书内容,然后生成 PDF.ePub.mobi 格式的电子书,或生成一 ...
- java程序转换excel中科学记数法的数据为date类型
今天出于某些原因从mongodb数据库中导出了一些数据,为了更直观的发送给其他人查阅,便使用mongoVUE的导出为excel功能. 但是导出后出现了一个问题,里边有一列存储时间的,存储的是lon ...
- log_format为Nginx设置日志格式
nginx服务器日志相关指令主要有两条,一条是log_format,用来设置日志格式, 另外一条是access_log,用来指定日志文件的存放路径.格式和缓存大小,一般在nginx的配置文件中日记配置 ...
- log4cplus 在配置文件中设置文件路径,程序自动创建目录,且在日志文件前按日期创建相应的目录
#include <string> #include <cstdio> #include <log4cplus/logger.h> #include <log ...