方法一：浮动  注意三个div的位置

<html>
<head>
 <meta charset="utf-8">
 <style type="text/css">
  *{
   margin:0;
   padding:0;
  }
  .left{
   width: 100px;
   background-color: red;
   height:100%;
   float:left;
  }
  .middle{
   width:auto;
   height:100%;
   background-color: yellow;
  }
  .right{
   width:100px;
   background-color: blue;
   float:right;
   height:100%;
  }

</style>
</head>
<body>
 <div id="id">
  <div class="left"></div>
  <div class="right"></div>
  <div class="middle"></div>
 </div>
</body>
</html>

方法二：定位

<html>
<head>
 <meta charset="utf-8">
 <style type="text/css">
  *{
   margin:0;
   padding:0;
  }
  #id{
   position: relative;
  }
  .left{
   width: 100px;
   background-color: red;
   height:100%;
   position: absolute;
   top:0;
   left:0;
  }
  .middle{
   width:auto;
   height:100%;
   background-color: yellow;
   margin:0 100px;
  }
  .right{
   width:100px;
   background-color: blue;
   height:100%;
   position: absolute;
   top:0;
   right:0;
  }

</style>
</head>
<body>
 <div id="id">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
 </div>
</body>
</html>

一个宽度不确定的DIV里放三个水平对齐的DIV，左右两个DIV宽度固定为100px，中间那个DIV自适应宽度的更多相关文章

  1. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  2. css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style

    css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...

  3. 实现div里的img图片水平垂直居中

    body结构 <body> <div> <img src="1.jpg" alt="haha"> </div> ...

  4. 在d盘中创建一个文件夹 在文件夹里创建三个txt文本

    import java.io.File; import java.io.IOException; public class FileDemo { public static void main(Str ...

  5. 总结：如何获取同一个DIV里的多个不同子标签的值，并赋值给input？

    这个问题说起来简单,但对于新手来说,也着实卡了好久,并且我在网上搜了好久没能找到合适的答案, 于是去博问问了一下,得到许多大神们的帮助与回答,接下来我就总结一下能够实现这个效果的几种方法,既为了自己更 ...

  6. storyboard xib下label怎么自适应宽度高度

    先看需求:两个Label,要求蓝色的label紧跟在红色的label文字后面  ok首选正常添加约束 红色的Label添加宽度,高度,左边,上边约束 蓝色的Label添加宽度,高度,左边,和红色的水平 ...

  7. iOSstoryboard xib下label怎么自适应宽度高度

    先看需求:两个Label,要求蓝色的label紧跟在红色的label文字后面 ok首选正常添加约束 红色的Label添加宽度,高度,左边,上边约束 蓝色的Label添加宽度,高度,左边,和红色的水平对 ...

  8. jQuery加载一个html页面到指定的div里

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...

  9. 如何让一个div里面的div垂直居中？

    如何让一个div里面的div垂直居中? 如何让上面灰色有文字那个div和背景图标垂直居中,不管屏幕大小有好大,始终在垂直方向上的中间.上面有整个布局和样式表,谢谢高手指点 CSS3时代当然要用CSS3 ...

随机推荐

  1. VRRP概述-转

    本文介绍了VRRP的基本原理.特点和应用. VRRP概述 随着Internet的发展,人们对网络的可靠性的要求越来越高.对于局域网用户来说,能够时刻与外部网络保持联系是非常重要的. 通常情况下,内部网 ...

  2. Oracle的UTL_FILE.FOPEN学习笔记

    Oracle提供的文件操作包UTL_FILE包中的UTL_FILE.FOPEN负责打开一个文件. UTL_FILE.FOPEN(location in varchar2, filename in va ...

  3. Leetcode75. Sort Colors颜色分类

    给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0. 1 和 2 分别表示红色.白色和蓝色. ...

  4. Android 开发 屏幕常亮的3个方法

    第一种 xml文件中的顶层布局添加属性: android:keepScreenOn="true" 第二种 在Window设置flag: getWindow().addFlags(W ...

  5. PHP CURL 异步测试

    需求, 请求第三方接口获取数据, 单个接口0.1秒, 如果有10万个接口, 那么岂不是得1万秒才能请求完, 所以使用PHP异步测试一下, 其他的方法还有: 1.使用队列, SupserVior 开多个 ...

  6. Odoo Documentation : Recordsets

    Other recordset operations Recordsets are iterable(可迭代的) so the usual Python tools are available for ...

  7. Vue.nextTick()的介绍和使用场景

    每次都很好奇这个干嘛的,然后百度之后还是不明白.今天就彻彻底底好好的弄明白这是干嘛的!! 首先看一下vue文档 nextTick(),是将回调函数延迟在下一次DOM更新数据后调用,简单的理解是:当数据 ...

  8. 爱上一门语言不需要理由——我的js之路

    开始记录js学习:~~~~分享一下你的js学习途径吧 决定学习前端之后,开始接触JavaScript 1995年,网景公司的Brendan Eich用10天完成了JavaScript的设计,他被称为J ...

  9. KOA 学习（一）

    一.安装KOA 用npm下载KOA 就会在koa文件夹下生成 二.输出hello,world 我下载的KOA版本号是2.0.1 const Koa = require('koa'); const ap ...

  10. python在WIN下CMD运行中文乱码及python 2.x python 3.x编码问题

    在CMD中运行python代码时,我们会发现,即使在代码中加入# -*- coding:utf-8 -*- 这段代码,中文仍然会乱码.如下: # -*- coding:utf-8 -*- conten ...