left设置为float:left,mianbody设为position:absolute,right设为float:right显示有问题
如题目所示,这样设置不知道为啥,left 和 mianbody 都正常,但是right字数很少或者宽度很小的时候会在一行,字数、宽多了就会自动另起一行为什么?(PS:并没有多到放不下、基础不好,代码有低级错误的地方请包涵。。。)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#warp{
background: #ff0;
width: 970px;
margin:20px auto;
position: relative;
overflow: hidden;
}
#left{
width: 110px;
height: 200px;
background: red;
float:left;
}
#middle{
width: 650px;
height: 250px;
background: blue;
position: absolute;
left:123px;
top:0;
}
#right{
width: 184px;
margin-left:786px;
height: 230px;
background: green;
float:right;
overflow:hidden;
}
</style>
</head>
<body>
<div id="warp">
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right1111</div>
</div>
</body>
</html>