首页 新闻 搜索 专区 学院

这段CSS是如何做到两个DIV在一行显示的?

0
悬赏园豆:5 [已解决问题] 解决于 2012-04-28 16:07

代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTMLiveCode</title>
        <style type="text/css">
            div{
                height:100px;
            }
            #a {
                width:100%;
                float:left;
                background:#aaa;
                margin-right:-200px;
            }
            #b {
                background:#eee;
                width:200px;
                float:right;
            }
        </style>
    </head>
    <body>
        <div id="a">test a</div>
        <div id="b">test b</div>
    </body>
</html>

关键在 margin-right:-200px这里,谁能帮忙解释一下

在线效果:http://jscode.chinacxy.com/code/a1ff4b5501d13353115fdae644f008ca.aspx

tab_china的主页 tab_china | 初学一级 | 园豆:54
提问于:2012-04-28 13:18
< >
分享
最佳答案
0

A的宽是没变的,margin-right:-200px就强制使该块区域的右侧margin多出200来,所以可以将B塞进去,那么实际上就是相当于B是叠在A的上面的。

收获园豆:5
wdwwtzy | 菜鸟二级 |园豆:226 | 2012-04-28 15:29

非常感谢

tab_china | 园豆:54 (初学一级) | 2012-04-28 16:08
其他回答(4)
-1

float:left了之后,又在右边空出了200px么。。。。

sinhbv | 园豆:2579 (老鸟四级) | 2012-04-28 13:47
-1

CSS里的float配置,值为left,表示顺序靠左,值为right,表示顺序靠右。

至于margin-right:-200px,这个只是因为a的width设置为100%,为了不出现换行的情况,那么就必须让b这个DIV有空间,而b的width刚好是200,设置了这个margin-right后,刚好满足了b的需求。

另外,似乎div设置width为100%是没效果的。

无之无 | 园豆:5085 (大侠五级) | 2012-04-28 13:48
-1

通过float浮动啊,一个左浮动:float:left; 一个右浮动:float:right;不就实现了

KivenRo | 园豆:1722 (小虾三级) | 2012-04-28 13:48
0

a加上positionabsolute;

#a {
    position:absolute;
}

 

 

dudu | 园豆:39034 (高人七级) | 2012-04-28 13:56
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册