左右两边宽度固定,中间自适应

  1. 左右两边绝对定位

  2. 可以利用浮动,左边的左浮动,右边的右浮动

  3. css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814.html)

  4. table布局

  5. 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之页面三列布局的更多相关文章

  1. css之页面三列布局之左右两边宽度固定,中间自适应

    左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...

  2. css之页面三列布局之左右上下高度固定,中间自适应

    第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...

  3. HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  4. CSS如何实现三列布局?如果两端固定、中间是自适应又该如何做?

    使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...

  5. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  6. CSS设计一个三列布局的页面

    探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要.无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset. 01 /* 02 KISSY CSS Rese ...

  7. css实现三列布局,左右固定值,中间自适应。

    这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...

  8. css常见的各种布局下----三列布局

    css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...

  9. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

随机推荐

  1. 【原创】刚刚发现的SVN的几个有用的功能

    一.可看到一个文件/目录跨Branch的所有变更历程 二.SVN可自动利用Word2013的审阅功能对比docx文档

  2. Android Studio--学习系列(2)

    1.Failed to load the LayoutLib: com/android/layoutlib/bridge/Bridge : Unsupported major.minor versio ...

  3. mysql授权登录用户

    创建用户并授权 CREATE USER 'voctrals'@'%' IDENTIFIED BY 'some_password'; 允许远程访问 GRANT ALL PRIVILEGES ON *.* ...

  4. 认识UML类图元素

    在Visio里,包和类的关系是包含关系,将类拖入包的文件夹之后,关系就建立了,二元关联符号可以设置为:聚合.合成.接口:空心圆+直线(唐老鸭类实现了‘讲人话’):依赖:虚线+箭头(动物和空气的关系): ...

  5. 获取广告标识符ifad

    #import <AdSupport/ASIdentifierManager.h> NSString *adId =[[[ASIdentifierManager sharedManager ...

  6. [综] Sparse Representation 稀疏表示 压缩感知

    稀疏表示 分为 2个过程:1. 获得字典(训练优化字典:直接给出字典),其中字典学习又分为2个步骤:Sparse Coding和Dictionary Update:2. 用得到超完备字典后,对测试数据 ...

  7. GitBook制作电子书详细教程(命令行版)

    GitBook 是一款基于 Node.js 开发的开源的工具,可以通过命令行的方式创建电子书项目,再使用 MarkDown 编写电子书内容,然后生成 PDF.ePub.mobi 格式的电子书,或生成一 ...

  8. java程序转换excel中科学记数法的数据为date类型

    今天出于某些原因从mongodb数据库中导出了一些数据,为了更直观的发送给其他人查阅,便使用mongoVUE的导出为excel功能.   但是导出后出现了一个问题,里边有一列存储时间的,存储的是lon ...

  9. log_format为Nginx设置日志格式

    nginx服务器日志相关指令主要有两条,一条是log_format,用来设置日志格式, 另外一条是access_log,用来指定日志文件的存放路径.格式和缓存大小,一般在nginx的配置文件中日记配置 ...

  10. log4cplus 在配置文件中设置文件路径,程序自动创建目录,且在日志文件前按日期创建相应的目录

    #include <string> #include <cstdio> #include <log4cplus/logger.h> #include <log ...