1.中间固定宽度，两侧自适应 
1.1  flex布局
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body,div{
            height: 100%;
        }
        .left {
            background-color: #ccc;
            flex:1;
        }

        .middle {
            background-color: #75cc23;
            flex:0 0 400px;
        }

        .right {
            background-color: #cc3b38;
            flex:1;
        }
        .con{
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="con">
    <div class="left">

    </div>
    <div class="middle">

    </div>
    <div class="right">

    </div>
</div>

</body>

//也可以用这个样式
html,body,div{
    height: 100%;
}
.left {
    background-color: #ccc;
    flex-grow:1;
}

.middle {
    background-color: #75cc23;
    width:400px;
}

.right {
    background-color: #cc3b38;
    flex-grow:1;
}
.con{
    display: flex;
    justify-content: center;
}

1.2 calc+float

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body,div{
            height: 100%;
        }
        .left,.right {
            background-color: #ccc;
            float: left;
            width:calc((100% - 400px) / 2)
        }

        .middle {
            background-color: #75cc23;
            width:400px;
            float:left;
        }

        .right {
            background-color: #cc3b38;

　　　　 }
    </style>
</head>
<body>
<div class="con">
    <div class="left">

    </div>
    <div class="middle">

    </div>
    <div class="right">

    </div>
</div>

</body>
</html>

2.两边固定 中间自适应
2.1浮动布局
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>title</title>
    <style type="text/css">
        .con div{
            min-height: 200px;
        }
        .con .left{
            float: left;
            width: 300px;
            background: #72f5ff;
        }
        .con .right{
            float: right;
            width: 300px;
            background: #7aff73;
        }
        .con .middle{
            background: #ff2d21;
        }

    </style>
</head>
<body>

<div class="con">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle">

    </div>
</div>

</body>
</html>
2.2使用绝对定位
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>绝对定位布局</title>
    <style type="text/css">
        .con div{
            position: absolute;
            min-height: 200px;
        }
        .con .left{
            left: 0;
            width: 300px;
            background: red;
        }
        .con .right{
            right: 0;
            width: 300px;
            background: blue;
        }
        .con .middle{
            left: 300px;
            right: 300px;
            background: pink;
        }

    </style>
</head>
<body>

<div class="con">
    <div class="left"></div>
    <div class="middle">

    </div>
    <div class="right"></div>
</div>

</body>
</html>
2.3 flex布局
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>flex</title>
    <style type="text/css">
        .con{
            min-height: 200px;
            display: flex;
        }
        .con .left{
            width: 300px;
            background: red;
        }
        .con .right{
            width: 300px;
            background: blue;
        }
        .con .middle{
            flex-grow: 1;
            background: #ffa861;
        }

    </style>
</head>
<body>

<div class="con">
    <div class="left"></div>
    <div class="middle">
    </div>
    <div class="right"></div>
</div>

</body>
</html>



												


											
html+css  常用布局的更多相关文章
	

    
						
  1. CSS常用布局实现方法
		
    CSS 布局对我来说,既熟悉又陌生.我既能实现它,又没有很好的了解它.所以想总结一下,梳理一下 CSS 中常用的一列,两列,三列布局等的实现方法.本文小白,仅供参考.但也要了解下浮动,定位等. 一.一 ...
    
		
    2. 
						
  2. css常用布局
		
    1.一列布局 html: <div class="header"></div> <div class="body">< ...
    
		
    3. 
						
  3. css 常用布局
		
    「前端那些事儿」③ CSS 布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a ...
    
		
    4. 
						
  4. CSS常用布局整理（二）
		
    1-2-1单列变宽布局 side列定宽300px,content列变宽,尺寸是100%-300px.核心的问题就是浮动列的宽度应该等于“100% - 300px”,而CSS显然不支持这种带有减法运算的 ...
    
		
    5. 
						
  5. CSS常用布局整理
		
    固定宽度布局 1-2-1布局(浮动) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <titl ...
    
		
    6. 
						
  6. CSS常用布局方式-两列布局、三列布局
		
    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
    
		
    7. 
								
  7. CSS常用布局技巧 实例
		
    末尾用省略号! white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ######################## 两个i ...
    
		
    8. 
						
  8. CSS常用布局学习笔记
		
    水平居中-行内元素 如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center; 水平居中-定宽块元素 div{ width:100px; margin:0 auto ...
    
		
    9. 
						
  9. DIV+CSS常用网页布局技巧！
		
    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. <自动化测试>之<Selenium API 的用法1>
			
    今天,简单,举例说一下在用python+selenium中元素定位的主要方法,第一部分是单个元素的操作,第二部分是一类元素的操作,实际操作中注意区分 #!/usr/bin/env python # - ...
    
			
    2. 
						
  2. Redis缓存接入监控、运维平台CacheCloud
			
    改造RedisConnectionFactory /** * 根据缓存策略的不同,RedisConnectionFactory不同 * 示例是单机模式. * * @return */@Beanpubl ...
    
			
    3. 
						
  3. 求最小生成树（暴力法，prim，prim的堆优化，kruskal）
			
    求最小生成树(暴力法,prim,prim的堆优化,kruskal) 5 71 2 22 5 21 3 41 4 73 4 12 3 13 5 6 我们采用的是dfs的回溯暴力,所以对于如下图,只能搜索 ...
    
			
    4. 
						
  4. python selenium 自动化流程的一些总结与思考
			
    首先要考虑的项目为什么要做自动化测试?(主要从自动化测试的优点着手) 其次是什么项目才适合做自动化测试? 自动化测试覆盖率要达到什么样的程度?因为都知道不可能达到100%的,不然脚本太臃肿,反而会失去 ...
    
			
    5. 
						
  5. mongo大数据量更新服务端超时解决： Cursor not found, cursor id: 82792803897
			
    mongodb pymongo.errors.CursorNotFound: Cursor not found, cursor id: 82792803897 默认 mongo server维护连接的 ...
    
			
    6. 
						
  6. CenterOS 设置静态IP
			
    本文主要介绍这样再CenterOS 中设定静态IP. 工具 centerOS 6.9 步骤 执行命令:vi /etc/sysconfig/network-scripts/ifcfg-eth0 编辑,填 ...
    
			
    7. 
						
  7. ES6数组中删除指定元素
			
    知识点: ES6从数组中删除指定元素 findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引.否则返回-1. arr.splice(arr.findIndex(item =>  ...
    
			
    8. 
						
  8. 基于MFC的Media Player播放器制作的SetTimer函数介绍
			
    |   版权声明:本文为博主原创文章,未经博主允许不得转载. SetTimer是一种API函数,位于user32.dll中.你想每隔一段时间执行一件事的的时候,你可以使用它. 使用定时器的方法比 较简 ...
    
			
    9. 
						
  9. [已解决]报错: Creating Server TCP listening socket 127.0.0.1:6379: bind: No error
			
    问题: windows下安装Redis第一次启动报错: [2368] 21 Apr 02:57:05.611 # Creating Server TCP listening socket 127.0. ...
    
			
    10. 
						
  10. [POI2010]OWC-Sheep
			
    题目 不难猜到或者发现的性质,如果连了一条对角线划分出了奇数个点,那么这条对角线肯定不合法:因为划分成三角形就不可能有对角线相交,于是划分成奇数的那一边怎么样也不可能划分成全是偶数 于是我们需要对每一 ...
    
			
    11.