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

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

2017-11-22 1248
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
  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开发
技术小牛人
目录
相关文章
弹性计算-百晓生
|
弹性计算 双11
【弹性计算双11开启】弹性计算产品放“价”，重磅新品低至2.5折起
给力好价，真的很省
弹性计算-百晓生
5164 4
【弹性计算双11开启】弹性计算产品放“价”，重磅新品低至2.5折起
2025「AI安全」全球攻防赛小编
|
10天前
|
云安全 人工智能 安全
阿里云安全携手月之暗面共筑AI基础设施“免疫系统”
大模型时代的“防御工事”
2025「AI安全」全球攻防赛小编
2420 157
阿里云安全携手月之暗面共筑AI基础设施“免疫系统”
八进智
|
8天前
|
人工智能 数据可视化 Java
Spring AI Alibaba、Dify、LangGraph 与 LangChain 综合对比分析报告
本报告对比Spring AI Alibaba、Dify、LangGraph与LangChain四大AI开发框架，涵盖架构、性能、生态及适用场景。数据截至2025年10月，基于公开资料分析，实际发展可能随技术演进调整。
八进智
710 150
阿里云云原生
|
17天前
|
人工智能 运维 Java
Spring AI Alibaba Admin 开源！以数据为中心的 Agent 开发平台
Spring AI Alibaba Admin 正式发布！一站式实现 Prompt 管理、动态热更新、评测集构建、自动化评估与全链路可观测，助力企业高效构建可信赖的 AI Agent 应用。开源共建，现已上线！
阿里云云原生
1486 39
modelscope
|
14天前
|
文字识别 测试技术 开发者
Qwen3-VL新成员 2B、32B来啦！更适合开发者体质
Qwen3-VL家族重磅推出2B与32B双版本，轻量高效与超强推理兼备，一模型通吃多模态与纯文本任务！
modelscope
995 11
八进智
|
6天前
|
缓存 PyTorch API
TensorRT-LLM 推理服务实战指南
`trtllm-serve` 是 TensorRT-LLM 官方推理服务工具，支持一键部署兼容 OpenAI API 的生产级服务，提供模型查询、文本与对话补全等接口，并兼容多模态及分布式部署，助力高效推理。
八进智
248 155

热门文章

最新文章

  • 1
    Charles抓包以及解决抓取HTTPS请求unknown的问题
  • 2
    MySQL · 参数故事 · innodb_additional_mem_pool_size
  • 3
    阿里云ECS网络增强型实例设计原理
  • 4
    Spring Cloud Alibaba 实操 (九) 持久化Sentinel限流规则
  • 5
    Jmeter之界面语言设置
  • 6
    有关网页抓取问题的一些经验总结
  • 7
    烂泥：Windows Server 2008如何修改用户的密码
  • 8
    postfix后续MailScanner
  • 9
    各行都和大数据攀关系 但数据不落地终究是场空
  • 10
    MySQL 锁
  • 1
    深入理解 Java 异常体系：Checked vs Unchecked Exception
    37
  • 2
    Java 8 十大新特性详解：Lambda、Stream、Optional 一网打尽
    48
  • 3
    AOP 是什么？一文带你彻底搞懂面向切面编程
    32
  • 4
    阿里云服务器ECS全方位介绍：购买流程、应用场景及使用教程
    27
  • 5
    RAG模型革命：大模型时代的问答系统最佳实践揭秘
    39
  • 6
    String、StringBuilder 与 StringBuffer 的区别与性能对比
    27
  • 7
    Redis 搭建主从复用-读写分离和主备切换,及重要的关键词解释 部分2
    24
  • 8
    中小企业也能玩转大模型：把AI搬到自己机房里不是梦
    43
  • 9
    业务不中断，系统不崩溃：运维人如何把“连续性”做到骨子里？
    37
  • 10
    当AI遇上大数据：教育不是“填鸭”，而是“因材施教2.0”
    36

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一文了解：阿里云对象存储OSS是什么？