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

  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. windows下IIS+PHP解决大文件上传500错问题

    linux下改到iis+php后,上传大于2M就出500错,改了php.ini中的upload_max_filesize也不行,最后解决如下: 第一步:修改php.ini 上传大小限制 (以上传500 ...

  2. Android学习笔记(十三)

    Android中的广播机制 Android提供了一套完整的API,允许应用程序自由地发送和接受广播. 发送广播的方法借助于Intent,接受广播的方法需要广播接收器(BroadcastsReceive ...

  3. SparkConf加载与SparkContext创建(源码阅读一)

    即日起开始spark源码阅读之旅,这个过程是相当痛苦的,也许有大量的看不懂,但是每天一个方法,一点点看,相信总归会有极大地提高的.那么下面开始: 创建sparkConf对象,那么究竟它干了什么了类,从 ...

  4. OAF_开发系列23_实现OAF数据格式CSS和CSS库(案例)

    20150716 Created By BaoXinjian

  5. 关于CSS学习的第一章

    1.CSS三种书写的方式:嵌入式.外链式.行内式 嵌入式就是将CSS写入在<style></style> 外链式将外面的CSS文件通过HTML中的标记链接过来:<link ...

  6. ActiveMQ与WebSocket的结合应用

    前段时间无意之中看到了WebSocket这样东西,发现自己真的是火星了.早在11年就有的东西,一直都不知道. 研究了一番之后感觉还是比较好用的. 我很少做Socket开发,但是曾经由于项目的原因,用过 ...

  7. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  8. 字典树的C++实现

    此次代码使用了诸多新鲜玩意,比如自动类型推断,模板类等等,感觉真的超级好玩啊. 自己做了一个简易的测试,程序的健壮性什么的还是比较差的,此程序留待以后进行功能补全. #pragma once #inc ...

  9. XF 文档 - Element Framework Doc

    配置篇 Chapter Configuration Schema篇 Chapter Schema 查询篇 Chapter Querying Data 数据更改及验证篇 Chapter Data Mod ...

  10. CacheManager COUNTER

    CacheClient.AddOrUpdate("COUNTER", 0, v => Convert.ToInt32(v) + 1);