关于一个网页div+css布局问题，不知如何解决呀，急
html代码如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/T...
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 type="text/css">
<!--
#main {
width: auto;
}
#left {
float: left;
width: 200px;
background-color: #F00;
}
#right {
margin-left: 210px;
}
#right1 {
background-color: #0F0;
}
.cl {
font-size: 0px;
line-height: 0px;
clear: both;
height: 0px;
}
#right_left {
float: left;
width: 400px;
background-color: #06F;
}
#right_right {
margin-left: 410px;
background-color: #FC3;
}
#right2 {
background-color: #F0F;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="left"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="right">
<div id="right1">
<div id="right_left">此处显示 id "right" 的内容<br />
<br />
<br />
<br />
</div>
<div id="right_right">此处显示 id "right_right" 的内容</div>
<div class="cl"></div>
</div>
<div id="right2">此处显示新 Div 标签的内容<br />
<br />
<br />
<br />
</div>
</div>
<div class="cl"></div>
</div>
</body>
</html>
加上<div class="cl"></div>后绿色部分就会随着红色部分伸缩，但我想要的效果是绿色部分只随蓝色或黄色部分伸缩，请问如何解决呢？谢谢。 展开
<!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 type="text/css">
<!--
#main {
width: auto;
}
#left {
float: left;
width: 200px;
background-color: #F00;
}
#right {
margin-left: 210px;
}
#right1 {
background-color: #0F0;
}
.cl {
font-size: 0px;
line-height: 0px;
clear: both;
height: 0px;
}
#right_left {
float: left;
width: 400px;
background-color: #06F;
}
#right_right {
margin-left: 410px;
background-color: #FC3;
}
#right2 {
background-color: #F0F;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="left"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="right">
<div id="right1">
<div id="right_left">此处显示 id "right" 的内容<br />
<br />
<br />
<br />
</div>
<div id="right_right">此处显示 id "right_right" 的内容</div>
<div class="cl"></div>
</div>
<div id="right2">此处显示新 Div 标签的内容<br />
<br />
<br />
<br />
</div>
</div>
<div class="cl"></div>
</div>
</body>
</html>
加上<div class="cl"></div>后绿色部分就会随着红色部分伸缩，但我想要的效果是绿色部分只随蓝色或黄色部分伸缩，请问如何解决呢？谢谢。 展开
4个回答
展开全部
没明白你的意思，不过发现了几个问题：
1.一般div你没定义宽度的话，默认是容器的100％；
2.你类cl只是清楚浮动，right1跟right2都没定义宽度，而且都在一个容器中，所以两个宽度一样；
3.还有就是最好不要用margin－left，因为浏览器的解释不一样，左右的话，你可以定义左右div的宽度，左边的float：left，右边的float：right，这样就可以了。
希望对你有所帮助，嘿嘿，我也是半路出家！
1.一般div你没定义宽度的话，默认是容器的100％；
2.你类cl只是清楚浮动，right1跟right2都没定义宽度，而且都在一个容器中，所以两个宽度一样；
3.还有就是最好不要用margin－left，因为浏览器的解释不一样，左右的话，你可以定义左右div的宽度，左边的float：left，右边的float：right，这样就可以了。
希望对你有所帮助，嘿嘿，我也是半路出家！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给#right1加个display:inline-block;就OK了。
<!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 type="text/css">
<!--
#main {
width: auto;
}
#left {
float: left;
width: 200px;
background-color: #F00;
}
#right {
margin-left: 210px;
}
#right1 {
background-color: #0F0;
display:inline-block;
}
.cl {
font-size: 0px;
line-height: 0px;
clear: both;
height: 0px;
}
#right_left {
float: left;
width: 400px;
background-color: #06F;
}
#right_right {
margin-left: 410px;
background-color: #FC3;
}
#right2 {
background-color: #F0F;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="left"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="right">
<div id="right1">
<div id="right_left">此处显示 id "right" 的内容<br />
<br />
<br />
<br />
</div>
<div id="right_right">此处显示 id "right_right" 的内容</div>
<div class="cl"></div>
</div>
<div id="right2">此处显示新 Div 标签的内容<br />
<br />
<br />
<br />
</div>
</div>
<div class="cl"></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 type="text/css">
<!--
#main {
width: auto;
}
#left {
float: left;
width: 200px;
background-color: #F00;
}
#right {
margin-left: 210px;
}
#right1 {
background-color: #0F0;
display:inline-block;
}
.cl {
font-size: 0px;
line-height: 0px;
clear: both;
height: 0px;
}
#right_left {
float: left;
width: 400px;
background-color: #06F;
}
#right_right {
margin-left: 410px;
background-color: #FC3;
}
#right2 {
background-color: #F0F;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="left"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="right">
<div id="right1">
<div id="right_left">此处显示 id "right" 的内容<br />
<br />
<br />
<br />
</div>
<div id="right_right">此处显示 id "right_right" 的内容</div>
<div class="cl"></div>
</div>
<div id="right2">此处显示新 Div 标签的内容<br />
<br />
<br />
<br />
</div>
</div>
<div class="cl"></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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.a{
width:600px;
height:400px;
margin:0 auto;
}
.b{
width:200px;
height:300px;
background-color:#FF0000;
float:left;
}
.c{
width:380px;
height:400px;
float:left;
margin-left:15px;
}
.d{
width:380px;
height:300px;
background-color:#00FF00;
}
.f{
width:380px;
height:100px;
background-color:#FF33FF;
}
.g{
width:200px;
height:50px;
background-color:#0000FF;
float:left;
}
.h{
width:150px;
height:50px;
float:left;
background-color:#FFFF00;
margin-left:5px;
}
-->
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
<div class="c">
<div class="d">
<div class="g"></div>
<div class="h"></div>
</div>
<div class="f"></div>
</div>
</div>
</body>
</html>
我重新帮你写了一下,你的div布局有问题,尤其是浮动的问题,估计你不太明白,你喜欢用ID,我喜欢用类,不过都一样,希望对你有所帮助.呵..
<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">
<!--
.a{
width:600px;
height:400px;
margin:0 auto;
}
.b{
width:200px;
height:300px;
background-color:#FF0000;
float:left;
}
.c{
width:380px;
height:400px;
float:left;
margin-left:15px;
}
.d{
width:380px;
height:300px;
background-color:#00FF00;
}
.f{
width:380px;
height:100px;
background-color:#FF33FF;
}
.g{
width:200px;
height:50px;
background-color:#0000FF;
float:left;
}
.h{
width:150px;
height:50px;
float:left;
background-color:#FFFF00;
margin-left:5px;
}
-->
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
<div class="c">
<div class="d">
<div class="g"></div>
<div class="h"></div>
</div>
<div class="f"></div>
</div>
</div>
</body>
</html>
我重新帮你写了一下,你的div布局有问题,尤其是浮动的问题,估计你不太明白,你喜欢用ID,我喜欢用类,不过都一样,希望对你有所帮助.呵..
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
虽然这类排版很简单,但是显然你的描述让我糊涂了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
