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

作者佚名技术来源 CSS技术浏览发布时间 2012-03-04

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

　　问题代码：

<!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">

</style>
</head>
<body>
<div id="content">
    <div id="left">
    left - webjx.com
    </div>
    <div id="right">
    right - webjx.com
    </div>
</div>
</body>
</html>

解决后CSS：

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

查看运行效果：

<!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">  </style> </head> <body> <div id="content"> <div id="left"> left - webjx.com </div> <div id="right"> right - webjx.com </div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: RGBA颜色实现背景颜色透明而文字不透明下一篇: Web标准和网站重构只是一种思想

关于CSS布局:居左之后居右是100%宽度显示问题的所有评论

随机推荐