首页 > 开发 > CSS > 正文

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

2024-07-11 08:21:42
字体:
来源:转载
供稿:网友

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

  问题代码:

<!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 - VeVb.com
    </div>
    <div id="right">
    right - VeVb.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 全部选择 提示:你可先修改部分代码,再按运行]

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表