HTML

/*适用方法1，方法2*/
<body>
　　<div class="container">
  　　<div class="left"></div>
  　　<div class="middle"></div>
  　　<div class="right"></div>
　　</div>
</body>

/* 适用方法3：*/
<body>
　　<div class="container">
  　　<div class="left"></div>
  　　<div class="right"></div>
  　　<div class="middle"></div>
　　</div>
</body>

CSS

/*方法1：定位实现*/
.container {
  position: relative;
}
.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 100px;
  background-color: red;
}
.middle {
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  padding-left: 200px;
  padding-right: 200px;
  background-color: blue;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background-color: red;
}
/*方法2：弹性布局实现*/
.container {
  display: flex;
}
.left {
  flex: 0 0 200px;
  height: 100px;
  background-color: red;
}
.middle {
  width: 100%;
  height: 100px;
  background-color: blue;
}
.right {
  flex: 0 0 200px;
  height: 100px;
  background-color: red;
}
/*方法3：浮动实现*/
.container {
  overflow: hidden;
}
.left {
  float: left;
  width: 200px;
  height: 100px;
  background-color: red;
}
.middle {
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  padding-left: 200px;
  padding-right: 200px;
  background-color: blue;
}
.right {
  float: right;
  width: 200px;
  height: 100px;
  background-color: red;
}

css布局------左右宽度固定,中间宽度自适应容器的更多相关文章

  1. css布局------上下高度固定,中间高度自适应容器

    HTML <body> <div class="container"> <div class="header"></d ...

  2. css布局之头尾固定中间高度自适应

    被这个问题困扰了很久.大神别鄙视我,我是搞后台开发的....试过了很多方法,比如设定高度100%.同事用的js计算高度,我对js设置的方式一直觉得不够好,尽管设置高度为100%的方式更差,直到发现了一 ...

  3. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  4. css之页面三列布局之左右两边宽度固定，中间自适应

    左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...

  5. 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  6. CSS 实现：两栏布局（一边固定，一边自适应）

    ☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...

  7. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  8. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  9. CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

    1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...

  10. css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

随机推荐

  1. 第六次spring会议

    昨天所做之事: 我对软件加上了保密功能. 今天所做内容: 我对软件加上了一键解密功能. private void 一键还原ToolStripMenuItem_Click(object sender, ...

  2. nodeJS实现一个在线填表应用

    1.构建一个web服务器 以前玩php和jsp时用过Apache.汤姆猫服务器,nodejs则有不同,他是需要自己createServer. //server.jsvar http = require ...

  3. PHP幸运大转盘源码，支持ThinkPHP

    原理 先看图 可以看到1-6等奖都只有1个 ,7等奖有6个.指针默认指向上图位置,记为0°. 每个奖项对应不同的角度,圆的角度为360°,分成12块,所以每块为30°. 为了防止指针指着相邻两个将向之 ...

  4. Apache Thrift的C++多线程编程定式

    Facebook贡献给Apache的开源RPC组件Thrift有着广泛的应用,C++中使用Thrift也十分普遍,但由于Thrift的Handler会被多个线程调用,因而多线程中应用并不直接的友好,利 ...

  5. 自己封装的简单DbDao

    首先,DbDao是一个用来操作数据库的类.需要对数据库的驱动包 要操作数据库首先要获得链接,这时候就需要链接数据库的所有参数了,包括driver,url,user,password.(全部定义为pri ...

  6. 请求转发(forward)和请求重定向(redirect)的区别(转)

    作者:@haimishasha本文为作者原创,转载请注明出处:https://www.cnblogs.com/haimishasha/p/5952129.html 用户向服务器发送了一次HTTP请求, ...

  7. PHP字符串函数之 strcmp strncmp strcasecmp strncasecmp strnatcmp strnatcasecmp

    strcmp – 二进制安全字符串比较 strncmp – 二进制安全比较字符串开头的若干个字符 strcasecmp – 二进制安全比较字符串(不区分大小写) strncasecmp – 二进制安全 ...

  8. .NET Core微服务之路：文章系列和内容索引汇总 (v0.52)

    微服务架构,对于从事JAVA架构的童鞋来说,早已不是什么新鲜的事儿,他们有鼎鼎大名的Spring Cloud这样的全家桶框架支撑,包含微服务核心组件如 1. Eureka:实现服务注册与发现. 2. ...

  9. WPF实现特殊统计图

    效果图: ActiveFunItem.xaml代码: <UserControl x:Class="SunCreate.Vipf.Client.UI.ActiveFunItem" ...

  10. 4.ASP.NET MVC 5.0 视图之模型绑定

    大家好,这篇文章,我将向大家介绍ASP.NET MVC的模型视图绑定,ASP.MVC的模型绑定分为两种:一种是动态绑定[Dynamic Binding];还有一种就是强类型绑定[Strongly ty ...