方法一：浮动  注意三个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-29-Z

    %%%ZZYY 只是因为是Z才模一下的. ZJ一下: 考试T1写了三张纸但是它死了. T2T3暴力叕写跪了. 考试一定一定不能不严密,少推两个交点是要命的啊. 就因为叕叕少开龙龙见祖宗了. 如果考试能 ...

  2. 给自己立下一个flag先

    恩,今天开始写博客. 其实主要原因是被人甩了,想找个事情让自己忙起来. 主要原因是“男人没钱就是无能”,我是个应届毕业生.所以你懂的. 我不喜欢让心情不爽,所以只能找事情让自己忙起来.所以我开始立Fl ...

  3. sqlmap：入门（手工注入）

    一. 联合查询注入union(less-1) 1. union操作符用于合并两个或多个select语句结果集: 2. union后的select语句必须拥有和最前的select语句拥有相同数量的字段, ...

  4. pycharm使用教程链接+部分练习题01

    pycharm安装: https://www.cnblogs.com/jin-xin/articles/9811379.html pycharm使用教程: https://edu.51cto.com/ ...

  5. mybatis-输入输出映射-动态sql-关联查询-mybatis与spring-逆向工程

    1.1. 输入映射和输出映射 Mapper.xml映射文件中定义了操作数据库的sql,每个sql是一个statement,映射文件是mybatis的核心. 1.1.1. 环境准备 1. 复制昨天的工程 ...

  6. oracle日志

    UTL_FILE.FOPEN(location in varchar2, filename in varchar2, open_mode in varchar2) return FILE_TYPE; ...

  7. MySQL5.6 community从下载到安装

    一, 官网下载: https://www.mysql.com/downloads/      二, 安装过程 1, 双击打开 安装 这里是进行数据库配置: 端口默认为3306 这里我们更改为1207 ...

  8. 大批量数据导出excel

    有次面试时,老板问我大批量数据一次性导出会有什么问题 感谢度娘提供,感谢原博主提供 https://www.cnblogs.com/zou90512/p/3989450.html

  9. idea查看jar冲突和解决方法

    选中Dependencies,点上边那个按钮,出现下图 依赖图太小了,根本没法看啊?好办,点击鼠标右键,呼出右键菜单栏,然后点击Actual Size: 如果我们仔细观察上图,会发现在项目依赖图中,有 ...

  10. codeforces600E. Lomsat gelral(dsu on tree)

    dsu on tree先分轻重儿子先处理轻边,再处理重儿子再加上轻儿子的答案 #include<iostream> #include<cstdio> #include<q ...