方法一：浮动  注意三个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. PAT甲级——A1079 Total Sales of Supply Chain

    A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyone invo ...

  2. Ubuntu安装Maven（转）

    原文地址:http://my.oschina.net/hongdengyan/blog/150472 一.环境说明: 操作系统:Ubuntu 14.10(64位) maven:apache-maven ...

  3. 《DSP using MATLAB》Problem 8.3

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  4. MySQL-Utilities：mysqldbcompare及跳过复制错误

    mysqldbcompare也是MySQL-Utilities工具集的一个脚本.mysqldbcompare从两个数据库比较对象和数据的不同.数据库中的对象包括:表.视图.触发器.存储过程.函数和事件 ...

  5. vue elment.style样式修改（第三方组件自生成元素）

    参考:https://blog.csdn.net/dcxia89/article/details/80402490         https://blog.csdn.net/jianglibo102 ...

  6. Spring容器管理各种文件

    1. 导入文件 <import resource="applicationContext-dataSource.xml" /> 2. 引用资源配置文件 <cont ...

  7. HLog工作原理

  8. 使用springboot上传文件至nginx代理服务器

    nginx配置图片服务器 server { listen 8001; server_name image.xxx.com; proxy_set_header X-Forwarded-Host $hos ...

  9. Leetcode951. Flip Equivalent Binary Trees翻转等价二叉树

    我们可以为二叉树 T 定义一个翻转操作,如下所示:选择任意节点,然后交换它的左子树和右子树. 只要经过一定次数的翻转操作后,能使 X 等于 Y,我们就称二叉树 X 翻转等价于二叉树 Y. 编写一个判断 ...

  10. 基于在树上走的DP问题

    笔者已经很久没有打过题解了,如果打题解,就总是要连着一个知识点来打题解. 最近做过一共两道这样的题目.笔者认为这样的题有较强的可拓展性,比较有意义. 所以就打一篇博客. 问题概述 先说说这是个什么样的 ...