当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS布局:居左之后居右是100%宽度显示问题

CSS样式表
web标准常见问题集合4
web标准常见问题集合5
我的一些关于web标准的思考笔记(一)
关于filter滤镜应用于图片的两种创意
Div+Css(+Js)菜单代码及制作工具
css写菜单:简洁注释版
标准布局应用:显示/隐藏侧边栏 [附详细注解]
小心:CSS代码书写顺序不同,导致显示效果不一样
解决鼠标在 flash 链接上不停闪动的问题(web页面中)
从gb到utf-8
html在线编辑器的更新[2006-05]
对hao123进行重构
韩国商业网站设计分析
模仿combox(select)控件,不用为美化select烦恼了。
【已解决】标签页刷新问题
以前写的两个CSS树形菜单
CSS样式表的背景渲染效率
第1天:选择什么样的DOCTYPE
第2天:什么是名字空间
第3天:定义语言编码

CSS样式表 中的 CSS布局:居左之后居右是100%宽度显示问题


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 124 ::
收藏到网摘: n/a

  下面这段代码是个常见的问题,解决的办法也有多个,最近发现一种放,放上来和大家讨论一下:

  问题代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css" media="screen">
<!--
#content { overflow: hidden; zoom: 1; }
#left { float: left; width: 200px; }
#right { background: #FFC8D0; }
-->
</style>
</head>
<body>
<div id="content">
    <div id="left">
    left - ruanchen.com
    </div>
    <div id="right">
    right - ruanchen.com
    </div>
</div>
</body>
</html>

解决后CSS:

#content { overflow: hidden; zoom: 1; }
#left { float: left; width: 200px;   }
#right { background: #FFC8D0;overflow: hidden; zoom: 1;  }

查看运行效果:


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]