两边定宽，中间自适应布局的四种实现方法

1. 浮动法

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>两边定宽，中间自适应</title> <style type="text/css"> html,body,div{

 　　　　height: 80%;　　　　border:3px solid black;

 } .left{ width: 300px; float: left; background-color: red; } .right{ width: 300px; float: right; background-color: yellow; } .center{ margin: auto 300px; background-color: green; } </style> </head> <body> <div class="left"></div> <div class="right"></div> <div class="center"></div> </body> </html>

2. 定位法

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>两边定宽，中间自适应</title> <style type="text/css"> html,body,div{

 　　　　height: 80%;　　　　border:3px solid black;

 } .parent{ position: relative; } .left{ width: 300px; position: absolute; left: 0; background-color: red; } .right{ width: 300px; position: absolute; right: 0; background-color: yellow; } .center{ margin: auto 300px; background-color: green; } </style> </head> <body> <div class="parent"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> </body> </html>

3. 弹性盒子法

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>两边定宽，中间自适应</title> <style type="text/css"> html,body,div{

　　　　height: 80%;　　　　border:3px solid black;

 } .parent{ display: flex; } .left{ width: 300px; background-color: red; } .right{ width: 300px; background-color: yellow; } .center{ flex:1; background-color: green; } </style> </head> <body> <div class="parent"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body> </html>

4.calc计算法

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>两边定宽，中间自适应</title> <style type="text/css"> html,body,div{ height: 80%;　　　　border:3px solid black; } .left{ width: 300px; float: left; background-color: red; } .right{ width: 300px; float: right; background-color: yellow; } .center{ width: calc(100% - 620px); margin: 0 auto; background-color: green; } </style> </head> <body> <div class="left"></div> <div class="right"></div> <div class="center"></div> </body> </html>

转载于:https://www.cnblogs.com/yzhihao/p/6519273.html

两边定宽，中间自适应布局的四种实现方法相关推荐

单列变双列css_css 两列布局中单列定宽单列自适应布局的6种思路
前面的话说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
两栏布局的四种实现方法
1.两栏布局 1.一栏定宽,一栏自适应效果如下图: html结构为: <div class="div1">div1</div> <div class ...
两栏布局之右定宽左自适应，上定高下自适应，下定高上自适应
这三种布局其实都是大同小异,今天就全部总结成一篇文章. 1.右定宽左自适应 <!DOCTYPE html> <html lang="en"> <hea ...
css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位左边中间右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
两列自适应布局的4种思路
前面的话前面已经介绍过单列定宽单列自适应的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和grid来介绍两列自适应布局的4种思路 ...
双飞翼 html 布局,css实现双飞翼布局的四种方法（附代码）
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 圣杯布局.双飞翼布局效果图从效果图来看圣杯布局.双飞翼布局效果 ...
vue AntD中栅格布局的四种大小xs,sm,md,lg
cssBootstrap栅格布局的四种大小xs,sm,md,lg 前端为了页面在不同大小的设备上也能够正常显示,通常会使用栅格布局的方式来实现. 使用bootStrap的网格系统时,常见到一下格式的类 ...
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
怎么将file转换为html,怎么将PDF文件转换为HTML？分享四种实用方法！
原标题:怎么将PDF文件转换为HTML?分享四种实用方法! 在我们日常学习和日常工作中,如果想要将PDF文件转换为HTML文件要怎么办呢?随着需求的增加,我们需要会的技能也要增加了.不止要将PDF文件 ...

两边定宽，中间自适应布局的四种实现方法

1. 浮动法

2. 定位法

3. 弹性盒子法

4.calc计算法

两边定宽，中间自适应布局的四种实现方法相关推荐

最新文章

热门文章