第一种：采用浮动

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布局两端固定中间自适应的更多相关文章

  1. css布局两边固定中间自适应的四种方法

    第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;& ...

  2. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  3. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  4. html布局,左侧固定右侧自适应

    前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...

  5. CSS图片两端对齐，自适应列表布局末行对齐修复实例页面

    写在前面 前端开发,图片两端对齐,是十分常见的,也是十分痛苦的,我试过好多方法,通过整理,认为下面还是比较靠谱的,在实践中大家可以试试,欢迎一起学习,一起进步 HTML代码 HTML代码非常简单,用的 ...

  6. css中左侧固定,右侧自适应

    谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告 ...

  7. css布局一屏幕的自适应高度

    css ;;list-style: none;} .top{height: 100px;background-color:orange;} .max{;background-color:skyblue ...

  8. css 两边宽度固定中间自适应宽度

    #content_left{   //左 width:73px; height:100px; vertical-align:middle; margin-right:-100px; float:lef ...

  9. CSS 布局经典问题初步整理

    CSS 定位问题 主要就是经典的绝对定位,相对定位问题. 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动. 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较 ...

随机推荐

  1. Python 之父的解析器系列之七：PEG 解析器的元语法

    原题 | A Meta-Grammar for PEG Parsers 作者 | Guido van Rossum(Python之父) 译者 | 豌豆花下猫("Python猫"公众 ...

  2. springboot 项目打包部署后设置上传文件访问的绝对路径

    1.设置绝对路径 application.properties的配置 #静态资源对外暴露的访问路径 file.staticAccessPath=/upload/** #文件上传目录(注意Linux和W ...

  3. 应用角度看kafka的术语和功能

    kafka的术语(Terminology) Topic 和Consumer Group Topic 每条发布到 Kafka 集群的消息都有一个类别,这个类别被称为 Topic.(物理上不同 Topic ...

  4. .Net Core 微服务容器系列基础目录篇

    1.开场白 HI,各位老铁,大家端午好,之前写了些关于.net core商城系列的文章,有点乱,今天心血来潮想着整理一下(今天只是先把目录列出来,后面的每篇文章这两天会进行重新修改的,目前先将就看下) ...

  5. OKR群：为什么说每个程序员都应该有自己的个人OKR

    个人OKR OKR,即Object and Key Result,是IT大厂最近争相推广的目标管理工具,例如腾讯.百度和头条(字节跳动). 其实,OKR并不是仅仅只适用于公司和部门内部,我们个人也可以 ...

  6. Android self_adaption of screen

    以下是Demo首页的预览图 demo下载:http://www.eoeandroid.com/forum.php?mod=attachment&aid=NjE0Njh8ZTIyZDA2M2N8 ...

  7. Scala 学习笔记之函数(3)

    class student{ def sayHello(name: => String){ println(s"Hello, $name, welcome $name") } ...

  8. Scala 学习笔记之集合(7) Option

    object CollectionDemo8 { def main(args: Array[String]): Unit = { //Option集合的使用,可以用来安全的判断null或非null,放 ...

  9. 通过搭建MySQL掌握k8s（Kubernetes）重要概念（下）：参数配置

    本文通过搭建MySQL环境来了解k8s的重要概念,包括持久卷,网络和参数配置.这是下篇,专门讲解参数配置.如果你有些地方不能完全看明白,请先看上篇"通过搭建MySQL掌握k8s(Kubern ...

  10. Python读取excel 数据

    1.安装xlrd 2.官网 通过官网来查看如何使用python读取Excel,python excel官网: http://www.python-excel.org/ 实例: (1)Excel内容 把 ...