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

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

2017-11-22 1187
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
  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开发
技术小牛人
目录
相关文章
你都不懂
|
5天前
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
你都不懂
9 1
朝阳39
|
4月前
|
前端开发 容器
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐，文本宽度大于容器宽度时居左对齐
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐，文本宽度大于容器宽度时居左对齐
朝阳39
37 2
龙腾九州
|
6月前
表格宽度和高度
表格宽度和高度。
龙腾九州
40 1
米果粒
|
6月前
|
前端开发
元素的宽度和高度
【5月更文挑战第4天】元素的宽度和高度。
米果粒
37 8
前端精髓
|
前端开发 容器
css实现三列等宽等间距排列(九宫格)
多种布局方式的处理
前端精髓
200 0
css实现三列等宽等间距排列(九宫格)
凯小默
table怎么实现部分列固定宽度，其它列宽自适应拉伸
table怎么实现部分列固定宽度，其它列宽自适应拉伸
凯小默
495 0
table怎么实现部分列固定宽度，其它列宽自适应拉伸
董员外
|
前端开发 JavaScript API
固定元素宽度根据文本的长度缩小字号，超出缩小字号
固定元素宽度根据文本的长度缩小字号，超出缩小字号
董员外
420 0
固定元素宽度根据文本的长度缩小字号，超出缩小字号
花花叔叔
盒子居中效果案例（使用位移方法）
盒子居中效果案例（使用位移方法）
花花叔叔
93 0
盒子居中效果案例（使用位移方法）
卡卡西最近怎么样
盒子在任意尺寸下保持居中对齐
盒子在任意尺寸下保持居中对齐
卡卡西最近怎么样
238 0
盒子在任意尺寸下保持居中对齐
卿卿的
|
Python
QTableWidget设置列自适应宽度，有最小宽度限制且可以自由拖动改变表头宽度
小问题踩大坑
卿卿的
6282 0

热门文章

最新文章

  • 1
    Object reference not set to an instance of an object.
  • 2
    Map根据键、值进行排序
  • 3
    锐捷网络&视易K米，携手助力2016腾讯全球合作伙伴万人大会
  • 4
    Java中的定时器
  • 5
    Python正则表达式指南下下半部　
  • 6
    VirtualDesktop多媒体在何处解码?
  • 7
    文件移动脚本
  • 8
    xml在此生活
  • 9
    在不动用sp_configure的情况下，如何 =》去掉列的自增长，并保留原数据
  • 10
    聚焦技术实战！MDCC 2016 移动开发者大会盛大开幕
  • 1
    2024Mysql And Redis基础与进阶操作系列（6）作者——LJS[含MySQL 多表之一对一/多；多对多；多表联合查询等详解步骤及常见报错问题所对应的解决方法]
    32
  • 2
    猫头虎分享：鸿蒙生态带给开发者的全新机遇！轻松实现按需加载与多端适配，开发效率翻倍
    31
  • 3
    2024Mysql And Redis基础与进阶操作系列（5）作者——LJS[含MySQL DQL基本查询:select；简单、排序、分组、聚合、分组、分页等详解步骤及常见报错问题所对应的解决方法]
    25
  • 4
    理解 ES6 中的 Promise
    26
  • 5
    CSS 提高性能的方法
    23
  • 6
    CSS 预编语言的区别
    10
  • 7
    如何快速掌握 CSS 预编语言
    10
  • 8
    对 CSS 预编语言的理解
    12
  • 9
    利用缓存布局信息来减少回流和重绘的发生
    12
  • 10
    减少回流和重绘的发生
    12

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月