繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS布局:居左之后居右是100%宽度显示问题
- CSS样式表
- 网页设计布局基础
- Lesson01_01 HTML基础
- HTML的全局架构标签
- Lesson01_03 注释与特殊字符
- Lesson01_04 格式标签与文本标签
- Lesson01_05 HTML中的超链接
- Lesson01_07 图像标签
- Lesson02_01 表格标签
- Lesson02_02 帧标签
- Lesson02_03 表单标签
- Lesson02_04 表单标签(2)
- Lesson02_05 头元素
- Lesson02_06 分区标签
- Lesson03_02 样式规则选择器
- 学习标准——笔记
- 用好href的target属性
- 常用CSS集合
- 教你如何用CSS来控制网页字体的显示样式
- 用CSS解决中英文混合字符串的截取省略问题的解决办法
- 鼠标移动到超链接上的效果
CSS样式表 中的 CSS布局:居左之后居右是100%宽度显示问题
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 120 ::
收藏到网摘: 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 全部选择 提示：你可先修改部分代码，再按运行]
评论 (0) All
