css三列布局问题:在一大框中 有三小框设置为float:left 为什么第三个小框不出来?
大框的宽度够为什么另两个小框会被挤到外面代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""htt...
大框的宽度够 为什么另两个小框会被挤到外面 代码如下:
<!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=utf-8" />
<title>实验</title>
<style>
*{
margin:0px;
padding:0px;
}
.uuu{
margin:auto;
width:600px;
background:#CCC;
}
.iii{
float:left;
width:190px;
height:100px;
background:red;
}
.rrr{
float:left;
width:190px;
height:100px;
background:green;
margin:0 200px;
}
.777{
float:left;
width:190px;
height:100px;
background:#FF3;
}
</style>
</head>
<body>
<div class="uuu">
<div class="iii">1</div>
<div class="rrr">1</div>
<div class="777">1</div>
</div>
</body>
</html> 展开
<!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=utf-8" />
<title>实验</title>
<style>
*{
margin:0px;
padding:0px;
}
.uuu{
margin:auto;
width:600px;
background:#CCC;
}
.iii{
float:left;
width:190px;
height:100px;
background:red;
}
.rrr{
float:left;
width:190px;
height:100px;
background:green;
margin:0 200px;
}
.777{
float:left;
width:190px;
height:100px;
background:#FF3;
}
</style>
</head>
<body>
<div class="uuu">
<div class="iii">1</div>
<div class="rrr">1</div>
<div class="777">1</div>
</div>
</body>
</html> 展开
3个回答
展开全部
<!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=utf-8" />
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
}
.uuu{
margin:auto;
width:600px;
background:#CCC;
}
.iii{
float:left;
width:190px;
height:100px;
background:red;
}
.rrr{
float:left;
width:190px;
height:100px;
background:green;
}
.777{
float:left;
width:190px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div class="uuu">
<div class="iii">1</div>
<div class="rrr">2</div>
<div class="777">3</div>
</div>
</body>
</html>
这个代码应该是你想要的结果。首先.rrr里的 margin:0 200px;是不应该改设置的。你可以重新建一个HTML页面，把CSS样式和BODY里的内容复制过去看看效果。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
}
.uuu{
margin:auto;
width:600px;
background:#CCC;
}
.iii{
float:left;
width:190px;
height:100px;
background:red;
}
.rrr{
float:left;
width:190px;
height:100px;
background:green;
}
.777{
float:left;
width:190px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div class="uuu">
<div class="iii">1</div>
<div class="rrr">2</div>
<div class="777">3</div>
</div>
</body>
</html>
这个代码应该是你想要的结果。首先.rrr里的 margin:0 200px;是不应该改设置的。你可以重新建一个HTML页面，把CSS样式和BODY里的内容复制过去看看效果。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
css命名，请不要用数字开头，你把777，改成英文，就可以了
试试我的
<!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=utf-8" />
<title>实验</title>
<style>
*{
margin:0px;
padding:0px;
}
.uuu{
margin:auto;
width:600px;
background:#CCC;
}
.iii{
float:left;
width:190px;
height:100px;
background:red;
}
.rrr{
float:left;
width:190px;
height:100px;
background:green;
}
.bbb{
float:left;
width:190px;
height:100px;
background:#FF3;
}
</style>
</head>
<body>
<div class="uuu">
<div class="iii">1</div>
<div class="rrr">1</div>
<div class="bbb">1</div>
</div>
</body>
</html>
试试我的
<!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=utf-8" />
<title>实验</title>
<style>
*{
margin:0px;
padding:0px;
}
.uuu{
margin:auto;
width:600px;
background:#CCC;
}
.iii{
float:left;
width:190px;
height:100px;
background:red;
}
.rrr{
float:left;
width:190px;
height:100px;
background:green;
}
.bbb{
float:left;
width:190px;
height:100px;
background:#FF3;
}
</style>
</head>
<body>
<div class="uuu">
<div class="iii">1</div>
<div class="rrr">1</div>
<div class="bbb">1</div>
</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.rrr{
float:left;
width:190px;
height:100px;
background:green;
margin:0 200px;
}
问题出在margin:0 200px;
左右200px，你够狠的，加上本身的190就变成590，你的总宽才600，不挤到下面都有鬼了，如果你在IE6中浏览的话，双边距，也就是200*2*2+190=990px
去掉margin，或改小就可以了
float:left;
width:190px;
height:100px;
background:green;
margin:0 200px;
}
问题出在margin:0 200px;
左右200px，你够狠的，加上本身的190就变成590，你的总宽才600，不挤到下面都有鬼了，如果你在IE6中浏览的话，双边距，也就是200*2*2+190=990px
去掉margin，或改小就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
