产品解决方案文档与社区免费试用定价云市场合作伙伴支持与服务了解阿里云
备案控制台登录/注册
开发者社区 云原生 文章 正文

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

2017-11-22 1129
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
+关注继续查看
  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开发
技术小牛人
目录
相关文章
前端精髓
|
8月前
|
前端开发 容器
css实现三列等宽等间距排列(九宫格)
多种布局方式的处理
前端精髓
80 0
css实现三列等宽等间距排列(九宫格)
凯小默
|
8月前
table怎么实现部分列固定宽度，其它列宽自适应拉伸
table怎么实现部分列固定宽度，其它列宽自适应拉伸
凯小默
171 0
table怎么实现部分列固定宽度，其它列宽自适应拉伸
卿卿的
|
Python
QTableWidget设置列自适应宽度，有最小宽度限制且可以自由拖动改变表头宽度
小问题踩大坑
卿卿的
4198 0
是乃德也是Ned
|
前端开发 Serverless
两个盒子，左边固定宽，右边自适应，你能想到几种方法？
最近不是又要秋招了吗？ 有的小伙伴就说了，你的面试专栏可是鸽了有一段时间了奥，再不更新我就取关拉！ 这这这，我这不来更新了吗，三个招聘季节，更新了三篇，**合情，合理~** ~~再也不画饼了~~
是乃德也是Ned
206 0
卡卡西最近怎么样
盒子在任意尺寸下保持居中对齐
盒子在任意尺寸下保持居中对齐
卡卡西最近怎么样
160 0
盒子在任意尺寸下保持居中对齐
血手巴赫
|
容器
左边固定宽，右边自适应的6种方法
左边固定宽，右边自适应的6种方法
血手巴赫
101 0
参谋总长萨博
|
前端开发 容器
div水平布局两边对齐
父容器div使用 position: relative;,子div使用 position:absolute;定位，注意边距问题。
参谋总长萨博
122 0
div水平布局两边对齐
鋒o丫头
|
前端开发
两列布局——但只用右浮动
通过这个实验我明白了一个知识点，做左右结构的时候，不用把左边的写上左浮动，只需要把有浮动的块放到最前边，并设置有浮动，左边的放在有浮动的下边而且不用管，这样，父元素也不用清楚浮动，左边的元素也不用左浮动，一切就依旧会和自己做左右布局的老方法一样的效果。
鋒o丫头
934 0
chaorenzeng
|
前端开发
关于三列布局中间列的居中问题
请看代码 &lt;style type="text/css"&gt; body{ margin:0; padding:0} .left{ width:100px; background:#06F;float:left; height:100px;} .mid{background:#099; height:100px;} .right{ width:100px; backgr
chaorenzeng
976 0
ihtcboy
|
Swift
用autolyout实现子视图对齐等宽排列
最终效果 实现效果 IB中实现 组成部分 其实，要让三个button三等分，那么一定要找一个view作为参考，所以我在底部加了一个bottomLine（距离左边0，距离右边40，距离底部0，高度为1），重要的是，我设置为隐藏。
ihtcboy
726 0
热门文章
最新文章
1
mysql下载源码方法
2
windows如何向阿里云服务器传递文件
3
整理一些计算机基础知识！
4
如何应用OSS的内网地址
5
阿里云服务器价格表，阿里云服务器购买价格出炉（2023更新）
6
企业数字化咨询服务
7
《21世纪机器人》一一3.2 从图纸到塑料模型
8
2016年物联网技术将成主流?
9
WebLogic口令猜解工具【Python脚本】
10
过年回家，程序猿最怕的5件事
1
【分布式技术专题】「分布式技术架构」手把手教你如何开发一个属于自己的限流器RateLimiter功能服务
29442
2
带你简单了解Chatgpt背后的秘密：大语言模型所需要条件（数据算法算力）以及其当前阶段的缺点局限性
24089
3
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局（上）
17477
4
为笔记本更换固态硬盘的方法
17638
5
重生之---我测阿里云U1实例(通用算力型)
36082
6
抽丝剥茧C语言（初阶 下）（下）
17192
7
如何保证分布式文件系统的数据一致性
30461
8
设计模式（C++版）
35287
9
灵骏可预期网络：Built for AI Infrastructure
29195
10
Redis性能高30%，阿里云倚天ECS性能摸底和迁移实践
35622
相关电子书
更多
低代码开发师（初级）实战教程 阿里巴巴DevOps 最佳实践手册 冬季实战营第三期：MySQL数据库进阶实战
推荐文章
更多
重磅来袭！参与评测赢Iphone14 pro！ 文件存储NAS评测征集令！ 招募！寻找技术人的伯乐！ 乘风者计划邀您入驻社区，精彩权益即刻享
下一篇
部署并使用Docker（CentOS 8）