AI 助理
备案控制台
开发者社区 云原生 文章 正文

右边固定宽度左边自适应宽度的两列布局方法

2017-11-22 1190
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>一边固定宽度和一边自适应宽度的布局</title> 
  6. <style type="text/css"> 
  7.     body { 
  8.         padding: 0; 
  9.         margin: 0; 
  10.     } 
  11.      
  12.     #wrapper { 
  13.         width: 960px; 
  14.         border: 1px solid #333; 
  15.         margin: 0 auto; 
  16.     } 
  17.      
  18.     #nav { 
  19.         width: 200px; 
  20.         float: right; 
  21.     } 
  22.      
  23.     #content-wrapper { 
  24.         margin-right: -200px; 
  25.         float: left; 
  26.         width: 100%; 
  27.     } 
  28.      
  29.     #content { 
  30.         margin-right: 200px; 
  31.         padding: 0 10px; 
  32.     } 
  33.      
  34.     .clearfix:after { 
  35.         height: 0; 
  36.         content: "."; 
  37.         display: block; 
  38.         clear: both; 
  39.         visibility: hidden; 
  40.     } 
  41. </style> 
  42. </head> 
  43. <body> 
  44.     <div id="wrapper" class="clearfix"> 
  45.         <div id="content-wrapper"> 
  46.             <div id="content"> 
  47.                 <p> 
  48.                 2010年11月末经济适用房开发贷款。 
  49.                 </p> 
  50.                                  
  51.             </div> 
  52.         </div> 
  53.         <div id="nav"> 
  54.             <p>菜单1</p> 
  55.             <p>菜单2</p> 
  56.             <p>菜单3</p> 
  57.             <p>菜单4</p> 
  58.         </div> 
  59.     </div> 
  60. </body> 
  61. </html> 

以上代码的关键技术部分可以表述为：将一个宽度为100%的div的外边距（left-margin or right-margin）设置为某个负值，然后将其第一个子div的外边距（与父容器的边距同方向）设置为对应的正值，那么这个div就可以浮动并且自适应浏览器宽度。 

本文转自 梦在旅途 博客园博客，原文链接：http://www.cnblogs.com/zuowj/p/3474275.html  ，如需转载请自行联系原作者

文章标签：
容器
Web App开发
技术小牛人
目录
相关文章
龙腾九州
|
10天前
|
前端开发
元素的宽度和高度
元素的宽度和高度。
龙腾九州
17 4
大树营养快线
|
18天前
在使用 Flexbox 布局实现自适应宽度的品字布局时，子元素的排列顺序是否可以调整？
【10月更文挑战第27天】使用Flexbox布局实现自适应宽度的品字布局时，可以通过调整HTML结构中的顺序或使用 `order` 属性来灵活地调整子元素的排列顺序，以满足不同的设计和布局需求。
大树营养快线
23 0
朝阳39
|
4月前
|
前端开发 容器
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐，文本宽度大于容器宽度时居左对齐
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐，文本宽度大于容器宽度时居左对齐
朝阳39
39 2
爱你三千遍斯塔克
|
4月前
|
前端开发
移动端的技术选项，流式布局就是宽度给百分比,流式布局为了防止无限制缩小，要加最小宽度
移动端的技术选项，流式布局就是宽度给百分比,流式布局为了防止无限制缩小，要加最小宽度
爱你三千遍斯塔克
31 0
龙腾九州
|
6月前
表格宽度和高度
表格宽度和高度。
龙腾九州
41 1
郏国上
|
6月前
根据字符串内容、最大宽度和字体计算行宽和高度
根据字符串内容、最大宽度和字体计算行宽和高度
郏国上
40 0
前端精髓
|
前端开发 容器
css实现三列等宽等间距排列(九宫格)
多种布局方式的处理
前端精髓
201 0
css实现三列等宽等间距排列(九宫格)
凯小默
table怎么实现部分列固定宽度，其它列宽自适应拉伸
table怎么实现部分列固定宽度，其它列宽自适应拉伸
凯小默
506 0
table怎么实现部分列固定宽度，其它列宽自适应拉伸
董员外
|
前端开发 JavaScript API
固定元素宽度根据文本的长度缩小字号，超出缩小字号
固定元素宽度根据文本的长度缩小字号，超出缩小字号
董员外
427 0
固定元素宽度根据文本的长度缩小字号，超出缩小字号
花花叔叔
盒子居中效果案例（使用位移方法）
盒子居中效果案例（使用位移方法）
花花叔叔
94 0
盒子居中效果案例（使用位移方法）