css布局两端固定中间自适应
第一种：采用浮动
1.1首先来看一下网上一个哥们给的代码
<body>
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div> </body>
div{
height: 200px;
}
.left{
float: left;
background: #bfa;
width: 200px;
}
.right{
float:right;
width: 200px;
background: #baf;
}
.center{
width: 100%;
margin: 0 200px;
margin-right: 100px;
background: #bdf;
}
效果图如下：
哎！乍一看，好像真的可以，可是当你把右侧的盒子和左侧的盒子删除后你将看到如下画面
也就是说左侧确实空出了空间，可是右侧的实际情况只是：右盒子覆盖在了中间盒子上面，中间盒子的大小是中间的蓝色加上右侧的紫色部分
对于这个现象我找到了一篇文章：https://blog.csdn.net/u011043843/article/details/28881557
即：margin-right其实有效果的，只是在默认即标准流的情况的下显示不出来效果。
这样就会导致一个问题：虽然文字在中间的盒子中不会受到影响，当时当你在中间的盒子加上一些元素时会发现这个盒子达不到你预期想要的效果
代码如下
这时small的宽度为：网页宽度-左侧盒子宽度
而不是：网页宽度减去-左侧盒子宽度-右侧盒子宽度 也就是会影响布局
于是我抖了个机灵将margin换成padding
即1.2
相比于上一个的优点即不影响布局，但是该盒子的颜色会“溢出“
第二种：采用绝对定位
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
.left,.right{
position: absolute;
width: 220px;
height: 250px;
top: 0;
}
.left{
background: #bfa;
}
.right{
right: 0;
background: #baf;
}
.center{
width: 100%;
height: 250px;
padding: 0 220px;
box-sizing: border-box;
margin-top: 0;
background: #bdf;
}
第三种：弹性布局
利用一个div作为容器，并使其display为flex，另左右宽度固定后设置中间盒子的flex为1即可，代码如下
<div class="big">
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</div>
.big{
display: flex;
}
.big div{
height: 200px;
}
.left{
width: 200px;
background: #bfa;
margin-top: 50px;
}
.right{
width: 200px;
background: #baf;
margin-top: 50px;
}
.center{
flex:1;
background: #bdf;
}
优点：简便，且不会有上述的“颜色溢出”的毛病
缺点：flex对低版本的浏览器兼容性不是很好
css布局两端固定中间自适应的更多相关文章
- css布局两边固定中间自适应的四种方法
第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;& ...
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- html布局,左侧固定右侧自适应
前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...
- CSS图片两端对齐，自适应列表布局末行对齐修复实例页面
写在前面 前端开发,图片两端对齐,是十分常见的,也是十分痛苦的,我试过好多方法,通过整理,认为下面还是比较靠谱的,在实践中大家可以试试,欢迎一起学习,一起进步 HTML代码 HTML代码非常简单,用的 ...
- css中左侧固定,右侧自适应
谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度; 2.只告 ...
- css布局一屏幕的自适应高度
css ;;list-style: none;} .top{height: 100px;background-color:orange;} .max{;background-color:skyblue ...
- css 两边宽度固定中间自适应宽度
#content_left{ //左 width:73px; height:100px; vertical-align:middle; margin-right:-100px; float:lef ...
- CSS 布局经典问题初步整理
CSS 定位问题 主要就是经典的绝对定位,相对定位问题. 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动. 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较 ...
随机推荐
- [C++]invalid initialization of non-const reference of type 'std::__cxx11::string& {aka std::__cxx11::basi
解决方法:在参数前面加一个cosnt或者把引用符号去掉
- 使用express框架创建服务器
上一篇写创建第一个node服务器是基于原始方法写的,express框架的作用就是省掉那些原始代码,直接调用相关的方法就可以了,开发起来简单方便. 一.package.json的配置 首先要进行pack ...
- python2.x和python3.x版本共存时选择启动的版本
在windows环境下装好python2.7和python3.6之后,我之前一直是用了很笨的办法去区分版本 那就是把各个版本python安装目录下的python.exe分别改为python2.exe和 ...
- Linux 部署vsftp服务及详解
一.FTP服务概述: FTP服务器(File Transfer Protocol Server)是在互联网上提供文件存储和访问服务的计算机,它们依照FTP协议提供服务. FTP(File Transf ...
- idea在debug模式下的启动特别慢？
程序执行到这里时,一直卡着不动? 原因可能是在方法上打了断点导致的: 将方法上的断点去掉,点击[Done]即可.
- MYSQL-用户密码修改
解决方法如下:1.终端中结束当前正在运行的mysql进程.# sudo /etc/init.d/mysql stop2.用mysql安全模式运行并跳过权限验证.# sudo /usr/bin/mysq ...
- Scala 学习笔记之集合(4)
集合的模式匹配操作: object CollectionDemo5 { def main(args: Array[String]): Unit = { //集合模式匹配1 val ls = List( ...
- FFmpeg(四) 像素转换相关函数理解
一.基本流程 1.sws_getCachedContext();//得到像素转换的上下文 2.sws_scale()://进行转换 二.函数说明 1.SwsContext *vctx = NULL; ...
- MySQL 视图（合并多表数据）引发的严重性能问题
问题背景: 一.客户环境连续多次出现性能问题,系统登入异常,数据库CPU告警. 处理过程: 1>协助排查数据库性能问题时发现如下两个较频繁的SQL导致严重的性能问题(均使用了视图合并多表数据): ...
- 复杂模型可解释性方法——LIME
一.模型可解释性 近年来,机器学习(深度学习)取得了一系列骄人战绩,但是其模型的深度和复杂度远远超出了人类理解的范畴,或者称之为黑盒(机器是否同样不能理解?),当一个机器学习模型泛化性能很好时 ...