求解CSS浮动式样
日期：2014-05-16 浏览次数：20652 次
求解CSS浮动样式
怎么才能使得粉红色的div模块放在绿色的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>
#container{
width:600px;
height:500px;
background:gray;
}
#test1{
width:50px;
height:50px;
background:red;
float:left;
}
#test2{
width:50px;
height:50px;
background:blue;
float:left;
}
#test3{
width:50px;
height:50px;
background:green;
clear:left;
flaot:left;
}
#test4{
width:50px;
height:50px;
background:pink;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
</div>
</body>
</html>
------解决方案--------------------
#test3{
width:50px;
height:50px;
background:green;
clear:left;
flaot:left;
}
修正 为 float:left;
------解决方案--------------------
float写错了
------解决方案--------------------
可以添加一个class 方便调用：
怎么才能使得粉红色的div模块放在绿色的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>
#container{
width:600px;
height:500px;
background:gray;
}
#test1{
width:50px;
height:50px;
background:red;
float:left;
}
#test2{
width:50px;
height:50px;
background:blue;
float:left;
}
#test3{
width:50px;
height:50px;
background:green;
clear:left;
flaot:left;
}
#test4{
width:50px;
height:50px;
background:pink;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
</div>
</body>
</html>
------解决方案--------------------
#test3{
width:50px;
height:50px;
background:green;
clear:left;
flaot:left;
}
修正 为 float:left;
------解决方案--------------------
#test3{
width:50px;
height:50px;
background:green;
clear:left;
flaot:left;
}
float写错了
------解决方案--------------------
可以添加一个class 方便调用：
.clear{
clear:both;
overflow:hidden;
height:0px;
line-height:0px;
font-size:0px;
}<div id="container">
<div id="test1"></div>
<div id="test2"></div>
<div class="clear"></div> /*添加一个div*/
<div id="test3"></div>
<div id="test4"></div>
</div>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
