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个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动. 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较 ...
随机推荐
- SqlServer 统计1-12月份 每个月的数据（临时表）
想做一个年度图表 效果如下,通过sqlserver来统计今年1-12月份每个月的数据,效果如下 sql语句网上找了很多都没有找到满意的 找到的其中一种写法是这样子的 这种写法对于前端来说很方便 不用进 ...
- [Spark] 02 - Practice Spark
开发环境 教学视频:Spark的环境搭建,需安装配置环境:Java, Hadoop 环境配置:玩转大数据分析!Spark2.X+Python 精华实战课程(免费)[其实只是环境搭建] 进入pyspar ...
- [Leetcode] 第148题 排序链表
一.题目描述 在 O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 示例 1: 输入: 4->2->1->3 输出: 1->2->3->4 示 ...
- vscode Springboot 启动debug报错：Build failed, do you want to continue?
一,前言 vscode我感觉是一个特别好用的开发工具,我根据文章https://www.cnblogs.com/WangBoBlog/p/9464281.html去搭建一个简单的springboot工 ...
- 三大特征提取器（RNN/CNN/Transformer）
目录 三大特征提取器 - RNN.CNN和Transformer 简介 循环神经网络RNN 传统RNN 长短期记忆网络(LSTM) 卷积神经网络CNN NLP界CNN模型的进化史 Transforme ...
- ThinkPHP5 清除runtime缓存文件
/** * 清除模版缓存 不删除cache目录 */ public function clear_sys_cache() { Cache::clear(); $this->success( '清 ...
- 设计时数据源：在PostgreSql 数据查询中使用参数过滤
在上一篇文章中,我们学习了如何设计时连接PostgreSQL 数据库及环境搭建.本节我们来学习使用PostgreSql 数据源时,创建数据集时带参数过滤的查询语句写法. 在报表中包含两种参数,可参考博 ...
- 校园网 虚拟机VMware Linux桥接模式 无法上网 问题
只是解决常见虚拟机桥接模式 无法上网问题,基本的百度都有 基本知识 虚拟机有三种网络连接模式:桥接模式,net模式,仅主机 桥接模式:同一网段允许的话,相当于一个独立的物理主机,独立ip net模式: ...
- spring5 源码深度解析----- @Transactional注解的声明式事物介绍（100%理解事务）
面的几个章节已经分析了spring基于@AspectJ的源码,那么接下来我们分析一下Aop的另一个重要功能,事物管理. 事务的介绍 1.数据库事物特性 原子性多个数据库操作是不可分割的,只有所有的操作 ...
- Android 调用 WebService
1.WebService简介 PS:如果看完上面简介还不是很清楚的话,那么就算了,之前公司就用C#搭的一个WebService! 本节我们并不讨论如何去搭建一个WebService,我们仅仅知道如何去 ...