CSS布局:居左之后居右是100%宽度显示问题


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

  问题代码:

<!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 - phpstudy.net
    </div>
    <div id="right">
    right - phpstudy.net
    </div>
</div>
</body>
</html>

解决后CSS:

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

查看运行效果:


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



相关阅读:
彪哥1.1(智能表格)提供下载
打造Linux系统Desktop平台下命令提示符
.NET和J2EE该相互学习什么
oracle常见异常
.NET命名空间和目录划分的经验
vbs病毒的简单例子源代码解析
Linux 内核 SCSI IO 子系统分析
Vista 资源管理器中关闭全部文件的预览
我认为JSP有问题(下)
asp.net coolite 删除时弹出确定按钮
在html页面上拖放移动标签
javascript 带有滚动条的表格,标题固定,带排序功能.
WebSphere 在linux下的安装配置过程
脚本和web页共用同一个文件测试
快速导航

Copyright © 2016 phpStudy |