方法一：浮动  注意三个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. 19-10-31-B

    %%%B哥 ZJ一下: 开题. 发现 语文考试???? 我不认识XD.老帅哥救我! 后来…… 对什么取模??? 什么玩意??输入什么?? 满足啥?? 全是亻 啊! 后来才知道是题楔×了 不管了. 然后 ...

  2. VS2010-MFC（MFC应用程序框架分析）

    转自:http://www.jizhuomi.com/software/145.html 一.SDK应用程序与MFC应用程序运行过程的对比 程序运行都要有入口函数,在之前的C++教程中都是main函数 ...

  3. maven错误：is duplicated in the reactor

    code-instrument-java git:(masterv2-2.2.2-solr) ✗ mvn clean package -Dmaven.test.skip=true [INFO] Sca ...

  4. 转：shell笔试题

    源地址:http://blog.csdn.net/zcsylj/article/details/6799632 1．用Shell编程,判断一文件是不是块或字符设备文件,如果是将其拷贝到 /dev 目录 ...

  5. PAT甲级——A1092 To Buy or Not to Buy【20】

    Eva would like to make a string of beads with her favorite colors so she went to a small shop to buy ...

  6. Neo4j删除节点和关系、彻底删除节点标签名

    https://www.jianshu.com/p/59bd829de0de 总结提前: [1]先删关系,再删节点 [2]当记不得关系名时,type(r)可以查到关系名 [3]彻底删除节点标签名,需要 ...

  7. 2019-5-21-Roslyn-使用-Directory.Build.props-管理多个项目配置

    title author date CreateTime categories Roslyn 使用 Directory.Build.props 管理多个项目配置 lindexi 2019-05-21 ...

  8. [转]Sql Server Alter语句

    原文链接:http://www.cnblogs.com/yoolonet/archive/2010/12/10/1884782.html 在修改Sql Server表结构时,常用到Alter语句,把一 ...

  9. 原 JEECMS导入IDEA进行二次开发图文教程

    JEECMS导入IDEA进行二次开发图文教程 2017年05月15日 17:03:53 Swain_Ho 阅读数 3257    版权声明:本文为博主原创文章,未经博主允许不得转载. https:// ...

  10. PAT甲级——A1010 Radix

    Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 110 be true? The an ...