三个div快 第一个左浮动 第二个不浮动 第三个右浮动 为什么右浮动上不去? 5

第一个和第三个都是浮起来的和第二个不在一个平面阿第三个怎么上不去呢,我看教程说让第二个占了,可是他们不在一个平面应该不影响第三个的阿我的意思是我不明白为什么第三个上不去。... 第一个和第三个都是浮起来的和第二个 不在一个平面阿 第三个怎么上不去呢,我看教程说让第二个占了,可是他们不在一个平面 应该不影响第三个的阿
我的意思是我不明白为什么第三个上不去。怎么解决这个我知道
展开
 我来答
匿名用户
推荐于2018-02-12
展开全部
因为第三个div块是写在第二个div块下面的,而且第二个div块的位置正常,没有浮动,它会一直占住它本来的位置。所以第三个div块不管怎么浮动都会被第二个div块挡下去。

就好像假如你的第一个向左浮动的div是写在第二个div下面,它也是不可能占到第二个蓝色的位置上去的。
<div style=" " ></div> // 这个不浮动的块是不会被下面的浮动改变的
<div style="float:left;"></div>

希望这样你能理解。
那漫天琥珀色陋Ds
2013-12-06 · 超过21用户采纳过TA的回答
知道答主
回答量:83
采纳率:33%
帮助的人:16.2万
展开全部

你是要达到上面那个效果么?下面是源码,估计是第三个div没设置margin-top才出问题的

<style type="text/css">
    #div1
    {
        background-color:#FF0000;
        width:100px;
        height:100px;
        float:left;
    }
    #div2
    {
        background-color:#FFFF00;
        width:150px;
        height:150px;
    }
    #div3
    {
        background-color:#33FF33;
        width:250px;
        height:250px;
        float:right;
        margin-top:-150px;
    }
</style>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>    
    <div id="div3"></div>
</body>
追问
我知道,我的意思是我不明白为什么第三个上不去 不在一个平面不是不互相影响的吗。为什么上不去呢
追答
你第二个没设置绝对布局(position:absolute)就会有影响吧
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
你的解药1995
2014-01-20
知道答主
回答量:1
采纳率:0%
帮助的人:1417
展开全部

同是新手,,我刚刚也是这种情况。

解决方法:

把绿色DIV的代码放到三个DIV代码排序第一个设置右浮动就可以了。


<div style=" float:right; width:300px; height:300px; background-color:#006633"></div>

<div style="float:left; width:300px; height:300px; background-color:#003399"></div>

<div style="float:left; width:300px; height:200px; background-color:#990000;"></div>


已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友c48b45d
2013-12-08
知道答主
回答量:11
采纳率:0%
帮助的人:6.2万
展开全部
第一个元素设置了左浮动,它照常浮动了,并且脱离了文档流,第二个元素并没有浮动,所以他无视了第一个浮动元素,进行覆盖,但是第一个浮动元素的z-index大于0,所以会出现反而覆盖了第二个元素,第三个元素是设置右浮动,它周围并没有浮动元素,它不知道根据哪个元素进行对准,你可以把第二个元素当做一个清除浮动元素,所以第三个元素会按照右浮动进行浮动
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友a69b9e9
2014-12-29
知道答主
回答量:3
采纳率:0%
帮助的人:2533
展开全部
第一个左浮动,脱离了文档流。 而第二个没脱离,即还是块状元素,会独占一行,这时你改动的是第三个,肯定不能和第二个还是块状元素的在一行。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(6)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式