方法一：浮动  注意三个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. 对XP上的KiFastSystemCall进行浅析

    Windows API的系统调用过程通过KiFastSystemCall或int 2e进入内核,本文仅对XP上的KiFastSystemCall进行浅析. 以ntdll!ZwCreateProcess ...

  2. JPA 中注解的作用

    JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中.        JPA由EJB 3.0软件专家 ...

  3. python实现批量修改服务器密码

    需求:机房.线上有多台主机,为了保障安全,需要定期修改密码.若手动修改,费时费力易出错. 程序应该满足如下需求 : 1.在现有的excel密码表格,在最后一个字段后面生成新的密码,另存为一个新的exc ...

  4. linux命令补全工具

    一:下载bash-competion工具 https://files.cnblogs.com/files/zgngg/bash-completion.zip 二:解压  unzip bash-comp ...

  5. 关于大数据平台ETL可行性方案

    今年做过两个公司需求都遇到了实时流入hive的需求,storm入hive有几种可行性方案. 1.storm直接写入hive,storm下面有个stormhive的工具包,可以进行数据写入hive.但是 ...

  6. 后缀自动机SAM

    某神犇:"初三还不会后缀自动机,那就退役吧!" 听到这句话后,我的内心是崩溃的. 我还年轻,我还不想退役--于是,我在后来,努力地学习后缀自动机. 终于,赶在初三开学前,我终于学会 ...

  7. day19 作业

    今日作业 1.什么是对象?什么是类? 对象:特征和技能的结合体 类:一系列对象 相同的特征和技能的结合体 2.绑定方法的有什么特点 对象调用类内部的函数 称之为绑定方法,特点: 不同的对象调用该绑定方 ...

  8. ajaxfileupload 上传使用demo

    1.添加js引用 <script src="JS/jquery-1.4.2.min.js" type="text/javascript"></ ...

  9. 前端存取cookie

    1.存cookie document.cookie="user_phone="+loginMake1Value;//存手机号码cookie//'user_phone'为cookie ...

  10. Cesium官方教程4--影像图层

    原文地址:https://cesiumjs.org/tutorials/Imagery-Layers-Tutorial/ 影像图层 Cesium支持多种服务来源的高精度影像(地图)数据的加载和渲染.图 ...