左右定宽，中间自适应

有几种方法可以实现

改变窗口大小看看？

方案一：

左右设置绝对定位，定宽，中间设置margin-left  margin-right

查看 demo

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>左右定宽，中间自适应(1)</title>
  7. <style type="text/css">
  8.     *{margin: 0;padding: 0;}
  9.     .left{
  10.         position: absolute;
  11.         top: 0;
  12.         left: 0;
  13.         width: 200px;
  14.         border: 1px solid #333;
  15.         background: #aaa;
  16.     }
  17.     .right{
  18.         position: absolute;
  19.         top: 0;
  20.         right: 0;
  21.         width: 220px;
  22.         background: #aaa;
  23.     }
  24.     .middle{
  25.         margin-left: 200px;
  26.         margin-right: 220px;
  27.         border: 1px solid #333;
  28.         background: #ccc;
  29.         word-break: break-all;
  30.     }
  31. </style>
  32. </head>
  33. <body>
  34.     <div class="left">
  35.     <h4>left</h4>
  36.         <p>oooooooooooooo
  37.         0000000000000000
  38.         00000000000000000
  39.         ooooooooooooooo
  40.         ooooooooooooooo
  41.         000000000000000</p>
  42.     </div>
  43.     <div class="middle">
  44.         <h4>middle</h4>
  45.         <p>HHHHHHHHHHHHHHHHHHHHHH
  46.         hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
  47.         HHHHHHHHHHHHHHHHHHHHHH
  48.         hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
  49.         </p>
  50.     </div>
  51.     <div class="right">
  52.     <h4>right</h4>
  53.         <p>BBBBBBBBBBBBBB
  54.         888888888888888888
  55.         BBBBBBBBBBBBBBBBBB
  56.         88888888888888888888</p>
  57.     </div>
  58. </body>
  59. </html>

方案二：

采用负边距处理。左中右都float：left;

中间的div里边再设置一个div ,外层div占满 width:100%; 内层div使用margin-left 和margin-right

左边加上负边距 margin-left:-100% 拉回最左端

右边加上负边距 margin-left:-220px (即为右边的宽度)拉回最右端

查看 demo

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>左右定宽，中间自适应(2)</title>
  7. <style type="text/css">
  8.     *{margin: 0;padding: 0;}
  9.     .left{
  10.         float: left;
  11.         margin-left: -100%;
  12.         width: 200px;
  13.         border: 1px solid #333;
  14.         background: #aaa;
  15.     }
  16.     .right{
  17.         float: left;
  18.         margin-left: -220px;
  19.         width: 220px;
  20.         background: #aaa;
  21.     }
  22.     .middle{
  23.         float: left;
  24.         width: 100%;
  25.     }
  26.     .middle-inner{
  27.         margin-left: 200px;
  28.         margin-right: 220px;
  29.         border: 1px solid #333;
  30.         background: #ccc;
  31.         word-break: break-all;
  32.     }
  33. </style>
  34. </head>
  35. <body>
  36.     <div class="middle">
  37.     <div class="middle-inner">
  38.         <h4>middle</h4>
  39.         <p>HHHHHHHHHHHHHHHHHHHHHH
  40.         hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
  41.         HHHHHHHHHHHHHHHHHHHHHH
  42.         hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
  43.         </p>
  44.         </div>
  45.     </div>
  46.     <div class="left">
  47.     <h4>left</h4>
  48.         <p>oooooooooooooo
  49.         0000000000000000
  50.         00000000000000000
  51.         ooooooooooooooo
  52.         ooooooooooooooo
  53.         000000000000000</p>
  54.     </div>
  55.  
  56.       <div class="right">
  57.     <h4>right</h4>
  58.         <p>BBBBBBBBBBBBBB
  59.         888888888888888888
  60.         BBBBBBBBBBBBBBBBBB
  61.         88888888888888888888</p>
  62.     </div>
  63. </body>
  64. </html>

方案三：

左边使用float:left 右边用float:right，html代码中的中间部分要放后边

查看 demo

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>左右定宽，中间自适应(3)</title>
  7. <style type="text/css">
  8.     *{margin: 0;padding: 0;}
  9.     .left{
  10.         float: left;
  11.         width: 200px;
  12.         border: 1px solid #333;
  13.         background: #aaa;
  14.     }
  15.     .right{
  16.         float: right;
  17.         width: 220px;
  18.         background: #aaa;
  19.     }
  20.     .middle{
  21.         margin-left: 200px;
  22.         margin-right: 220px;
  23.         border: 1px solid #333;
  24.         background: #ccc;
  25.         word-break: break-all;
  26.     }
  27. </style>
  28. </head>
  29. <body>
  30.     <div class="left">
  31.     <h4>left</h4>
  32.         <p>oooooooooooooo
  33.         0000000000000000
  34.         00000000000000000
  35.         ooooooooooooooo
  36.         ooooooooooooooo
  37.         000000000000000</p>
  38.     </div>
  39.     <div class="right">
  40.     <h4>right</h4>
  41.         <p>BBBBBBBBBBBBBB
  42.         888888888888888888
  43.         BBBBBBBBBBBBBBBBBB
  44.         88888888888888888888</p>
  45.     </div>
  46.         <div class="middle">
  47.         <h4>middle</h4>
  48.         <p>HHHHHHHHHHHHHHHHHHHHHH
  49.         hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
  50.         HHHHHHHHHHHHHHHHHHHHHH
  51.         hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
  52.         </p>
  53.     </div>
  54. </body>
  55. </html>

CSS布局 -- 左右定宽，中间自适应的更多相关文章

  1. css布局：定宽，自适应

    css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...

  2. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  3. CSS布局 -- 左侧定宽，右侧自适应

    左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...

  4. CSS布局——左定宽度右自适应宽度并且等高布局

    方法一: 别的不多说,直接上代码,或者参考在线DEMO,下面所有的DEMO都有HTML和CSS代码,感兴趣的同学自己慢慢看吧. HTML Markup <div id="contain ...

  5. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  6. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  7. CSS基础布局--居中对齐，左侧定宽右侧自适应

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

  8. 请给出一个左侧定宽右侧自适应的HTML结构及样式

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Layout两列定宽中间自适应三列布局

    最容易理解的一种方法,以中间内容为主体,通过 margin 或者 padding 将两侧撑开,最后用 absolute 定位两侧 html: <div class="container ...

随机推荐

  1. ELK——Logstash 2.2 date 插件【翻译+实践】

    官网地址 本文内容 语法 测试数据 可配置选项 参考资料 date 插件是日期插件,这个插件,常用而重要. 如果不用 date 插件,那么 Logstash 将处理时间作为时间戳.时间戳字段是 Log ...

  2. std::bind和std::function

    std::bind 用于绑定一个函数,返回另外一种调用方式的函数对象 ,可以改变参数顺序 和个数,特别是在多线程的程序中,经常用它将函数进行包装,然后打包发送给工作线程,让工作线程去执行我们的任务. ...

  3. hive中grouping sets的使用

    hive中grouping sets 数量较多时如何处理?    可以使用如下设置来 set hive.new.job.grouping.set.cardinality = 30; 这条设置的意义在于 ...

  4. 对list集合中的对象按照对象的某一属性进行排序

    /**  * 重新对list中的CmsCyUser对象按照最终的票数进行排序  * @param list  */ private void reSort(List list) {   Object[ ...

  5. C语言代写

    MTRX1702 - C ProgrammingAssignment 2This assignment requires you to design and build a program that ...

  6. how to use javap command

    SYNOPSIS javap [options] classes DESCRIPTION The javap command is called "disassembler" be ...

  7. Android获取TextView显示的字符串宽度

    工作上有业务需要判断textview是否换行,我的做法是判断textview要显示的字符串的宽度是否超过我设定的宽度,若超过则会执行换行. 项目中的其他地方也有这样的需求,故直接使用了那一块的代码.如 ...

  8. openssl命令行工具简介 - RSA操作

    原文链接: http://www.cnblogs.com/aLittleBitCool/archive/2011/09/22/2185418.html 首先介绍下命令台下openssl工具的简单使用: ...

  9. 从逆向的角度去理解C++虚函数表

    很久没有写过文章了,自己一直是做C/C++开发的,我一直认为,作为一个C/C++程序员,如果能够好好学一下汇编和逆向分析,那么对于我们去理解C/C++将会有很大的帮助,因为程序中所有的奥秘都藏在汇编中 ...

  10. [原]运行编译好的Android模拟器

    Android源码编译好了之后,我们就可以运行它了. 1.配置环境变量: /data/data/Android$ export PATH=$PATH:$(pwd)/out/host/linux-x86 ...