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

CSS样式表
全面了解CSS
单纯使用CSS实现动态提示信息
像table一样布局div
一个自动居中的导航条实例与相关问题 DIV+CSS
一个导航条布局的简单写法
Overflow OPREA
空格BUG
DIV+CSS 网页TIP的简单作法
如何设置一个指定高度的DIV
CSS实现阴影文字效果
全面考察“禁用浏览器后退”
仿windows工具条样式
DOM属性用法速查手册
如何设置网页的背景为透明
凸起的按钮效果
带白边的黑字 css
什么是Unicode,什么是UTF-8
怎么让表格为固定大小,超出的部分显示为省略号
实用的标签效果
找到html标记对应的脚本属性

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 128 ::
收藏到网摘: 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 全部选择 提示:你可先修改部分代码,再按运行]