div+css想做这样一个导航条
长度是100%；左边是蓝色的往左无限延伸，右边是黑色的，往右边无限延伸，不能出现横向滚动条，求解说下原理把，我脑子转不过来了...
长度是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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
.main{ width:100%; height:30px;}
.left{ width:50%; height:30px; background-color:#3366FF; float:left;}
.right{ width:50%; height:30px; background-color:#000000; float:left;}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
楼主看看是这种效果吗？这个原理很简单，一个最大的DIV也就是css名是main的，他是100%的宽度，然后left和right是各50%的宽度，然后left和right用上浮动，那么就是这个效果了，因为这个都是用的百分比那么这个大小会根据浏览器的宽度去变化宽度
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
.main{ width:100%; height:30px;}
.left{ width:50%; height:30px; background-color:#3366FF; float:left;}
.right{ width:50%; height:30px; background-color:#000000; float:left;}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
楼主看看是这种效果吗？这个原理很简单，一个最大的DIV也就是css名是main的，他是100%的宽度，然后left和right是各50%的宽度，然后left和right用上浮动，那么就是这个效果了，因为这个都是用的百分比那么这个大小会根据浏览器的宽度去变化宽度
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
