                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

为什么给div1设置了float:left 之后，div2 中的栏目2 还是下下面一排没有跟着框一起上去

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
div{
   border:2px red solid;
    width:200px;
    height:400px;

}
#div1{
    float:left;
}
</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>
</html>

范爷

2016-04-10

源自：初识HTML(5)+CSS(3)-升级版 13-4

关注问题我要回答

658

操作

收起

7 回答

_AI风逝云栖_
2016-04-29

因为你两个DIV的宽度加上border的宽度超过了浏览器的宽度，所以他上下显示，你试试把DIV的宽度调小，然后设置float就OK了

1 回复有任何疑惑可以回复我~

收起回答

慕客学渣会总瓢把子3201537
2016-04-21

我觉得是超过了容器的宽度，你把宽度设置变小就可以浮动了。不知道对不对？

0 回复有任何疑惑可以回复我~

收起回答

忆_卿
2016-04-21

因为你是给dvi1 设置成左浮动。但是dvi2没有啊，块状元素是独占一行的，任何元素在默认情况下是不能浮动的，所以它两根本不能并排在一起，一个是左浮动，一个是独占一行。怎么并排？

0 回复有任何疑惑可以回复我~

收起回答

qq_木木呆呆的_03153304
2016-04-10

#div1{
float:left;
}
#div2{
float: left;

}

0 回复有任何疑惑可以回复我~

收起回答

范爷提问者

不懂原因

2016-04-10 回复有任何疑惑可以回复我~

qq_木木呆呆的_03153304
2016-04-10

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
div{
border:2px red solid;
width:200px;
height:400px;

}
#div1{
float:left;
position: absolute;
}
#div2{
position: relative;
bottom: 0px;
}
</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>
</html>