芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
1

CSS 两列自适应布局方法

css
作者 芒果/分类 代码/发布于 2009-04-16 05:50

之前芒果介绍过自适应网页宽度的浏览器兼容方法,针对不同的分辨率提供了很好的解决方法。在网页设计中,两列自适应宽度也经常用到。多见为一列固定宽度,一列自适应宽度。下面是两种简单的两列自适应布局:

1. 左列固定,右列自适应宽度
HTML 代码为:

<div id="wrapper">id "wrapper"
  <div id="left">id "left"</div>
  <div id="right">id "right"</div>
</div>

CSS 代码为:

#wrapper {border:10px solid #999999;background-color:#999999;}
#left {float:left;width:200px;background-color:#CCCCCC;}
#right {margin-left:210px;background-color:#CCCCCC;}

2. 右列固定,左列自适应宽度
HTML 代码为:

<div id="wrapper">id "wrapper"
  <div id="right">id "right"</div>
  <div id="left">id "left"</div>
</div>

CSS 代码为:

#wrapper {border:10px solid #999999;background-color:#999999;}
#left {margin-right:210px;background-color:#CCCCCC;}
#right {float:right;width:200px;background-color:#CCCCCC;}

这里紧紧提供了布局框架,可以按需要修改代码。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/css-two-column-adaptive-layout-method/" title="CSS 两列自适应布局方法" rel="bookmark">CSS 两列自适应布局方法 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 1 条群众意见

  1. ?
    CSS 两列自适应布局方法 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /2011-06-14 18:45

    […] 转载至:CSS 两列自适应布局方法 | 芒果小站 分类: css, html 标签: 临时 20 款 CSS 资源网站收集推荐MySQL Proxy – MySQL代理的介绍及个人使用经验[MySQL 5.1 体验]MySQL 实例管理器 mysqlmanager 初试mysqldump 导出的sql文件导入时提示Unknown command ‘[’解决.MySQL Memcache_engine的安装与使用为什么我用$name得不到post的变量session完全教程PHP两种安装模式的区别一个分页显示类PHP代码的优与劣 评论 (0) Trackbacks (0) 发表评论 Trackback […] 回应

    #1

下面我简单说几句