这段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
最佳答案
0
A的宽是没变的，margin-right:-200px就强制使该块区域的右侧margin多出200来，所以可以将B塞进去，那么实际上就是相当于B是叠在A的上面的。
收获园豆：5
非常感谢
其他回答(4)
-1
float:left了之后，又在右边空出了200px么。。。。
-1
CSS里的float配置，值为left，表示顺序靠左，值为right，表示顺序靠右。
至于margin-right:-200px，这个只是因为a的width设置为100%，为了不出现换行的情况，那么就必须让b这个DIV有空间，而b的width刚好是200，设置了这个margin-right后，刚好满足了b的需求。
另外，似乎div设置width为100%是没效果的。
-1
通过float浮动啊，一个左浮动：float:left; 一个右浮动:float:right;不就实现了
0
a加上position: absolute;
#a { position:absolute; }