左侧定宽，右侧自适应

有很多种方法可以实现

缩小窗口试试看？

方案一：

左边左浮动，右边加个margin-left

查看 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.         float: left;
  11.         width: 200px;
  12.         border: 1px solid #333;
  13.         background: #aaa;
  14.     }
  15.     .right{
  16.         margin-left:200px;
  17.         border: 1px solid #333;
  18.         background: #ccc;
  19.         word-break: break-all;
  20.     }
  21. </style>
  22. </head>
  23. <body>
  24.     <div class="left">
  25.     <h4>left</h4>
  26.         <p>oooooooooooooo
  27.         0000000000000000
  28.         00000000000000000
  29.         ooooooooooooooo
  30.         ooooooooooooooo
  31.         000000000000000</p>
  32.     </div>
  33.     <div class="right">
  34.     <h4>right</h4>
  35.         <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
  36.         888888888888888888888888888888888
  37.         BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
  38.         888888888888888888888888888888888</p>
  39.     </div>
  40. </body>
  41. </html>

方案二：

左边左浮动，右边overflow：hidden   不过这种方法IE6下不兼容

查看 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.         width: 200px;
  12.         border: 1px solid #333;
  13.         background: #aaa;
  14.     }
  15.     .right{
  16.         overflow: hidden;
  17.         border: 1px solid #333;
  18.         background: #ccc;
  19.         word-break: break-all;
  20.     }
  21. </style>
  22. </head>
  23. <body>
  24.     <div class="left">
  25.     <h4>left</h4>
  26.         <p>oooooooooooooo
  27.         0000000000000000
  28.         00000000000000000
  29.         ooooooooooooooo
  30.         ooooooooooooooo
  31.         000000000000000</p>
  32.     </div>
  33.     <div class="right">
  34.     <h4>right</h4>
  35.         <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
  36.         888888888888888888888888888888888
  37.         BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
  38.         888888888888888888888888888888888</p>
  39.     </div>
  40. </body>
  41. </html>

方案三：

左边使用绝对定位，右边使用margin-left

查看 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.         position: absolute;
  11.         top: 0;
  12.         left: 0;
  13.         width: 200px;
  14.         border: 1px solid #333;
  15.         background: #aaa;
  16.     }
  17.     .right{
  18.         margin-left:200px;
  19.         border: 1px solid #333;
  20.         background: #ccc;
  21.         word-break: break-all;
  22.     }
  23. </style>
  24. </head>
  25. <body>
  26.     <div class="left">
  27.     <h4>left</h4>
  28.         <p>oooooooooooooo
  29.         0000000000000000
  30.         00000000000000000
  31.         ooooooooooooooo
  32.         ooooooooooooooo
  33.         000000000000000</p>
  34.     </div>
  35.     <div class="right">
  36.     <h4>right</h4>
  37.         <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
  38.         888888888888888888888888888888888
  39.         BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
  40.         888888888888888888888888888888888</p>
  41.     </div>
  42. </body>
  43. </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>左侧定宽，右侧自适应(4)</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.         left: 200px;
  20.         top:0;
  21.         border: 1px solid #333;
  22.         background: #ccc;
  23.         word-break: break-all;
  24.     }
  25. </style>
  26. </head>
  27. <body>
  28.     <div class="left">
  29.     <h4>left</h4>
  30.         <p>oooooooooooooo
  31.         0000000000000000
  32.         00000000000000000
  33.         ooooooooooooooo
  34.         ooooooooooooooo
  35.         000000000000000</p>
  36.     </div>
  37.     <div class="right">
  38.     <h4>right</h4>
  39.         <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
  40.         888888888888888888888888888888888
  41.         BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
  42.         888888888888888888888888888888888</p>
  43.     </div>
  44. </body>
  45. </html>

方案五：

这种方法相对来说就有点复杂了，右边的div里边还有一个div

查看 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>左侧定宽，右侧自适应(5)</title>
  7. <style type="text/css">
  8.     *{margin: 0;padding: 0;}
  9.     .left{
  10.         float: left;
  11.         margin-right: -100%;
  12.         width: 200px;
  13.         border: 1px solid #333;
  14.         background: #aaa;
  15.     }
  16.     .right{
  17.         float: left;
  18.         width: 100%;
  19.     }
  20.     .inner-right{
  21.         margin-left: 200px;
  22.         border: 1px solid #333;
  23.         background: #ccc;
  24.         word-break: break-all;
  25.     }
  26. </style>
  27. </head>
  28. <body>
  29.     <div class="left">
  30.     <h4>left</h4>
  31.         <p>oooooooooooooo
  32.         0000000000000000
  33.         00000000000000000
  34.         ooooooooooooooo
  35.         ooooooooooooooo
  36.         000000000000000</p>
  37.     </div>
  38.     <div class="right">
  39.     <div class="inner-right">
  40.     <h4>right</h4>
  41.         <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
  42.         888888888888888888888888888888888
  43.         BBBBBBBBBBBBBBBBBBBBBBBBBBBBB
  44.         888888888888888888888888888888888</p>
  45.         </div>
  46.     </div>
  47. </body>
  48. </html>

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

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

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

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

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

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

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

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

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

  5. CSS左侧固定宽 右侧自适应（兼容所有浏览器）

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  6. CSS 实现左侧固定，右侧自适应两栏布局的方法

    "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

  7. CSS布局 -- 左右定宽，中间自适应

    左右定宽,中间自适应 有几种方法可以实现 改变窗口大小看看? 方案一: 左右设置绝对定位,定宽,中间设置margin-left  margin-right 查看 demo <!DOCTYPE h ...

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

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

  9. table-cell完成左侧定宽，右侧定宽及左右定宽等布局

    使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; f ...

随机推荐

  1. Uploadify v3.2.1 上传图片并预览

    前端JSP: <script type="text/javascript"> $(function() { $("#upload_org_code" ...

  2. iPhone设备字体详解

    做iPhone开发的同学一定对:UIFont systemFontOfSize.boldSystemFontOfSize.italicSystemFontOfSize很熟悉,但你们知道它们都是什么字体 ...

  3. [知识库分享系列] 二、.NET（ASP.NET）

    最近时间又有了新的想法,当我用新的眼光在整理一些很老的知识库时,发现很多东西都已经过时,或者是很基础很零碎的知识点.如果分享出去大家不看倒好,更担心的是会误人子弟,但为了保证此系列的完整,还是选择分享 ...

  4. 解决“com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536”问题(l转)

    同时在工程中引入了多个第三方jar包,导致调用的方法数超过了android设定的65536个(DEX 64K problem),进而导致dex无法生成,也就无法生成APK文件. 解决办法如下: 1.谷 ...

  5. Spark 实时计算整合案例

    1.概述 最近有同学问道,除了使用 Storm 充当实时计算的模型外,还有木有其他的方式来实现实时计算的业务.了解到,在使用 Storm 时,需要编写基于编程语言的代码.比如,要实现一个流水指标的统计 ...

  6. iOS:缓存与Operation优先级问题

    这篇博客来源于今年的一个面试题,当我们使用SDWebImgae框架中的sd_setImageWithURL: placeholderImage:方法在tableView或者collectionView ...

  7. iOS CoreData 增删改查详解

    最近在学习CoreData, 因为项目开发中需要,特意学习和整理了一下,整理出来方便以后使用和同行借鉴.目前开发使用的Swift语言开发的项目.所以整理出来的是Swift版本,OC我就放弃了. 虽然S ...

  8. AX2012 R3升级CU8的一些错误

    AX2012 R3安装升级包CU8后进入系统,系统会提示打开软件升级清单“Software update checklist”,清单列出了升级要做的一系列动作. 在进行到编译应用时“Compile a ...

  9. TDA - Thread Dump Analyzer (Java线程分析工具)

    TDA - Thread Dump Analyzer (Java线程分析工具)http://automationqa.com/forum.php?mod=viewthread&tid=2351 ...

  10. 没有 RunInstallerAttribute.Yes 的公共安装程序。在 C:/Program/xx.exe 程序集中可能可以找到

    今天在装服务的时候,装了半天总是提示 没有 RunInstallerAttribute.Yes 的公共安装程序.在 C:/Program/xx.exe 程序集中可能可以找到“Yes”属性. 才发现同事 ...