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个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动. 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较 ...
随机推荐
- [VB.NET Tips]字符串转换为日期
有些字符串需要转换成日期,或者整型转换为日期,可以参考如下思路: Dim result As Date Dim source As String = "20190515" resu ...
- 实操：Could not autowire No beans of 'FastDFS Client' type found 的解决方法
前言: 今天接手了同事之前做的一个小项目,里面涉及到了 FastDFS 的使用.但是当我在本地运行项目的时候,却报了 Could not autowire No beans of 'FastDFS C ...
- Http协议基础内容
1.Http协议是什么协议? 客户端和服务器之间的数据传输的格式规范,简称"超文本传输协议". 2.什么是Http协议无状态协议?怎么解决Http协议无状态协议? 1)无状态协议对 ...
- JAVASE知识点总结（四）
第十七章:内部类和枚举 一.内部类 1.什么是内部类? 2.为什么要有内部类? 3.内部类的种类: 5.实例内部类 6.创建实例内部类 7.实例内部类注意点 8.访问变量原则: 4 9.静态内部类: ...
- 使用Storm进行词频统计
词频统计 1.需求:读取指定目录的数据,并且实现单词计数功能 2.实现方案: Spout用于读取指定文件夹(目录),读取文件,将文件的每一行发射到Bolt SplitBolt用于接收Spout发射过来 ...
- CAS详细登录流程(转）
转:https://www.cnblogs.com/lihuidu/p/6495247.html 4.CAS的详细登录流程 上图是3个登录场景,分别为:第一次访问www.qiandu.com.第二次访 ...
- Spring boot 梳理 - 代码结构（Main类的位置）
Spring boot 对代码结构无特殊要求,但有个套最佳实践的推荐 不要使用没有包名的类.没有包名时,@ComponentScan, @EntityScan, or @SpringBootAppli ...
- MangoDB的下载和安装
前面已经简单介绍了MongoDB,今天我们就要正式学习他了,话不多说,咱先来安装. 1.现在MongoDB已经到了4.0版本,咱先去官网下载,MongoDB官网传送门,下载的版本信息如下,点击Do ...
- Ng项目安装到指定盘符
全局安装 1.node.js 2.cnpm 3.typeScript 4.ng-cli 指定安装: 1.首先在想要的盘符内新建一个名字 例: D盘中新建一个angualr的文件夹 2.在开始菜单中输入 ...
- Python3 学习笔记之 变量/字符串/if/while/逻辑运算符/模块引用
变量/if/while/逻辑运算符/模块引用: 变量: 使用变量前必须先赋值. 大小写区分. Python创建字符串,在字符串两边可以加上单引号或者双引号. 打印单引号或双引号,使用转移\ 使用\进行 ...