<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

解决方案 »

  1.   


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

  2.   

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

  3.   

    多谢。 现在又有了另一个问题,
    <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结构的前提下。
      

  4.   


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

  5.   

    回楼上,效果是需要这样,但 id=left 这个div的 border-right: 3px solid #99BBE8;这个属性不能移到其他地方, 能否让红色div盖掉那条线,突破到右边去。。
      

  6.   

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

  7.   

    做着效果的目的是,一个extjs的grid, 里面加了类似Excel 的列锁定功能,请参考这个例子
    http://monkee.comli.com/lockingmultigrouping/LockingMultiGroup.html左边锁住部分和右边,是用了2个大div,但有个问题,左边的group头 被截断了,后面显示不了,能否延伸到右边去
      

  8.   

    这里发言,表示您接受了CSDN社区的用户行为准则。
      

  9.   

    6楼的不行吗?
    只需将第三行的width:100px 改为 width:200px 好像就行了
    IE8、FF好像都符合要求了