css问题：怎样使同一行中两个块不因浏览器窗口大小改变而改变原来的位置？
就是这个结果，红和绿在同一行，把红和绿放在了灰中，教学视频中这样写可以实现不改变的效果，可是我写后怎么不出现这个效果，请大神指教，谢谢！本人写的代码：<!DOCTYPEh...
就是这个结果，红和绿在同一行，把红和绿放在了灰中，教学视频中这样写可以实现不改变的效果，可是我写后怎么不出现这个效果，请大神指教，谢谢！
本人写的代码：
<!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">body,div{ margin:0; padding:0;}#box{ background:grey; height:250px; }#one{ background:red; width:100px; height:100px; float:left;}#two{ background:blue; width:200px; height:200px; float:right;}#three{ background:green; height:80px; clear:both;}
</style></head>
<body><div id="box"> <div id="one">1</div> <div id="two">2</div></div><div id="three">3</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">body,div{ margin:0; padding:0;}#box{ background:grey; height:250px; }#one{ background:red; width:100px; height:100px; float:left;}#two{ background:blue; width:200px; height:200px; float:right;}#three{ background:green; height:80px; clear:both;}
</style></head>
<body><div id="box"> <div id="one">1</div> <div id="two">2</div></div><div id="three">3</div></body></html>
可是结果仍然是改变后的效果 展开
2个回答
展开全部
红色和蓝色的width不要设置成固定的，用百分比来设置，比如：
#one{
background:red;
width:40%;
height:100px;
float:left;
}
#two{
background:blue;
width:60%;
height:200px;
float:right;
}
表示各占父元素的width的百分之多少！这样就可以自适应了！
#one{
background:red;
width:40%;
height:100px;
float:left;
}
#two{
background:blue;
width:60%;
height:200px;
float:right;
}
表示各占父元素的width的百分之多少！这样就可以自适应了！
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
