<html>
<head>
</head>
<body><div>
<div id="left" style="position:absolute;">
<div style="width:100; height:100; border-style: solid solid solid;background-color:#ff0000;">
aaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="left:100; width:100; height:100; border-style: solid solid solid;">
ccccccccc
</div>
</div>
<div id="right" style="position:absolute; left:120;">
<div style="width:100; height:100;border-style: solid solid solid;">
</div>
<div style="left:100; width:100; height:100; border-style: solid solid solid;">
ddddddd
</div>
</div></div>
</body>
</html>
以上代码效果如左图,能否做到像右边的效果, 让左边的div跨越它的父div,并覆盖掉右边的div
<head>
</head>
<body><div>
<div id="left" style="position:absolute;">
<div style="width:100; height:100; border-style: solid solid solid;background-color:#ff0000;">
aaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="left:100; width:100; height:100; border-style: solid solid solid;">
ccccccccc
</div>
</div>
<div id="right" style="position:absolute; left:120;">
<div style="width:100; height:100;border-style: solid solid solid;">
</div>
<div style="left:100; width:100; height:100; border-style: solid solid solid;">
ddddddd
</div>
</div></div>
</body>
</html>
以上代码效果如左图,能否做到像右边的效果, 让左边的div跨越它的父div,并覆盖掉右边的div
<div>
<div id="left" style="position:absolute;">
<div style="width:200; height:100; border-style: solid solid solid;background-color:#ff0000;">
aaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="left:100; width:100; height:100; border-style: solid solid solid;">
ccccccccc
</div>
</div>
<div id="right" style="position:absolute; left:120;">
<div style="width:100; height:100; border-style: solid solid solid;border-color:transparent">
</div>
<div style="left:100; width:100; height:100; border-style: solid solid solid;">
ddddddd
</div>
</div></div>
<div id="left" style="position:absolute;">
<div style="width:200; height:100; border-style: solid solid solid;background-color:#ff0000;" contenteditable=true>
aaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="left:100; width:100; height:100; border-style: solid solid solid;">
ccccccccc
</div>
</div>
<div id="right" style="position:absolute; left:120;">
<div style="width:100; height:100; border-style: solid solid solid;border-color:transparent">
</div>
<div style="left:100; width:100; height:100; border-style: solid solid solid;">
ddddddd
</div>
</div></div>
<html>
<head>
</head>
<body><div>
<div id="left" style="position:absolute;border-right: 3px solid #99BBE8; border-style: none solid solid;">
<div style="width:100; height:100; background-color:#ff0000;">
aaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="left:100; width:100; height:100;">
ccccccccc
</div>
</div>
<div id="right" style="position:absolute; left:120;">
<div style="width:100; height:100;">
</div>
<div style="left:100; width:100; height:100;">
ddddddd
</div>
</div></div>
</body>
</html>
以上代码效果如左图,由于被2个大div分割,中间有一条蓝色的条, 如果把左上角那个div的width改成200, 这个蓝条就会跑到最右边, 如中间那个图, 能否做到第三个图的效果? 不改动整个div结构的前提下。
<div>
<div id="left" style="position:absolute; border-style: none none solid solid;">
<div style="width:200; height:100; background-color:#ff0000;">
aaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="left:100; width:100; height:100;border-right: 3px solid #99BBE8;">
ccccccccc
</div>
</div>
<div id="right" style="position:absolute; left:120;">
<div style="width:100; height:100;">
</div>
<div style="left:100; width:100; height:100;">
ddddddd
</div>
</div>
</div>
<head>
</head>
<body><div style="position:relative;">
<div id="left" style="position:absolute;height:200px;width:100px;border-right: 3px solid #99BBE8; border-style: none solid solid;">
<div style="width:100px;position:absolute; height:100px; background-color:#ff0000;">
aaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="position:absolute;top:100px;width:100px; height:100px;">
ccccccccc
</div>
</div>
<div id="right" style="position:absolute; left:100px;">
<div style="width:100px; height:100px;">
</div>
<div style="border-bottom:3px solid #000; width:100px; height:100px;">
ddddddd
</div>
</div></div>
</body>
</html>
http://monkee.comli.com/lockingmultigrouping/LockingMultiGroup.html左边锁住部分和右边,是用了2个大div,但有个问题,左边的group头 被截断了,后面显示不了,能否延伸到右边去
只需将第三行的width:100px 改为 width:200px 好像就行了
IE8、FF好像都符合要求了