问答详情
源自：13-4 起飞咯 - 浮动模型

为什么给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 14:02

个回答

  • _AI风逝云栖_
    2016-04-29 17:34:33

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

    1
  • 慕客学渣会总瓢把子3201537
    2016-04-21 16:51:39

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

    0
  • 忆_卿
    2016-04-21 10:38:07

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

    0
  • qq_木木呆呆的_03153304
    2016-04-10 14:25:50


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

    }

    0
  • qq_木木呆呆的_03153304
    2016-04-10 14:23:54

    <!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>

    0
  • 学学学学学学i
    2016-04-10 14:16:58

    你只给div1设置了 左浮动，div2并没有设置浮动  它肯定就上不来呀， 你在给div2加个左浮动就肯定没问题了   

    0
  • LeoLiyu
    2016-04-10 14:16:30

    Add 'float:left;' to div2

    0