• 2007-12-03

    一行两列的float问题(兼容ie&ff) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/11463180.html

    折腾了一天div+css,浏览器兼容性问题太麻烦。

    要达到的效果如上图所示。


    在ie里直接将两块左右浮动即可,代码如下:
    <s t y l e>
    .txt{float:right}
    </s t y l e>
    <d i v id="demo" style="width:300px;border:1px solid red;background:white">
    <l a b e l style="background:yellow;float:left"><img src="http://tw.yimg.com/i/tw/news/yimg/pimg_97x120.jpg" style="margin-right:10px"></l a b e l>
    <d i v class="txt">LONDON - From soldiers who donned red Santa hats in
    Afghanistan to devoted worshippers visiting Bethlehem, Christians around the world celebrated Christmas Day with the sobering thoughts of peace and tolerance even as open war flared in Somalia.</d i v>
    </d i v>


    然而此方法在ff里无效。尝试了很多方法,均不理想,只得用js来控制,兼容ie&ff的实现方法如下:
    <s c r i p t>
    function mycss()
    {
    document.getElementById("mytxt").style.marginLeft=document.getElementById('mylab').offsetWidth;
    }
    </s c r i p t>
    <b o d y onload=mycss()>
    <d i v id="demo" style="width:300px;border:1px solid red;background:white">
    <l a b e l id=mylab style="background:yellow;float:left"><img src="http://tw.yimg.com/i/tw/news/yimg/pimg_97x120.jpg" style="margin-right:10px"></l a b e l>
    <d i v id="mytxt" class="txt">LONDON - From soldiers who donned red Santa hats in
    Afghanistan to devoted worshippers visiting Bethlehem, Christians around the world celebrated Christmas Day with the sobering thoughts of peace and tolerance even as open war flared in Somalia.</d i v>
    </d i v>


    应该有更好的解决办法,纯用css实现。欢迎讨论。

     

    感谢csdn的ddcatlee给出最佳解决办法。其实就是让ff把div作为table-cell,晕啊,该死的web2.0。纯css兼容ie&ff方法如下:
    <!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <style>
    <!--
    .demo {
    width:300px;
    border:1px   solid   red;
    background:white;
    clear:both;
    line-height:1;
    }
    .demo .pic {
    float:left;
    }
    .demo .pic img {
    background:yellow;
    padding-right:10px;
    }
    .demo .txt   {
    float:left;
    }
    .demo > .pic,
    .demo > .txt  {
    display:table-cell;
    float:none;
    vertical-align:top;
    }
    -->
    </style>
    <div id="demo" class="demo">
    <label class="pic"><img src="http://tw.yimg.com/i/tw/news/yimg/pimg_97x120.jpg"></label>
    <div class="txt">LONDON - From soldiers who donned red Santa hats in
    Afghanistan to devoted worshippers visiting Bethlehem, Christians around the world celebrated Christmas Day with the sobering thoughts of peace and tolerance even as open war flared in Somalia.</div>
    </div>

    分享到:

    历史上的今天:

    十年 2006-12-03

    评论

  • 娟娟,是面试题。我也不想做这个。接触了一段杂志编辑,似乎都是跟采访挂钩,其实是另一种形式的拉客户,无奈。
  • 白菜,你现在还做这个工作?不是做主编了吗?我觉得好难啊,我一点都不懂了!蜕化了。
  • 呵呵,最近是很少上。我已经加你了。
    外层div只定宽300px,不定高。还有方法吗?
  • 你都不上MSN沙...都碰不到你 加我QQ : 9608094

    再试试这个解决思路...

    <div id=\"demo\" style=\"width: 300px; height: 250px; border:1px solid red; background: white; position: absolute;\">
    <div style=\"float: left; width: auto; height: 100%; background: yellow;\"><img src=\"http://tw.yimg.com/i/tw/news/yimg/pimg_97x120.jpg\" width=\"120\" border=\"0\"></div>
    <div style=\"width: auto;\">LONDON - From soldiers who donned red Santa hats in Afghanistan to devoted worshippers visiting Bethlehem, Christians around the world celebrated Christmas Day with the sobering thoughts of peace and tolerance even as open war flared in Somalia.</div>
  • 哼,不发这种文怎么能把你们这些潜水的家伙引出来:)
    哎,什么都得干。我还真是不习惯web2.0的某些东西,比如div+css。真怀念table啊。
    因为\'The image is dynamic size\',不能把层宽定死。有没有别的办法实现一行两列啊?
    你的近况如何,有空聊聊。
  • 坤姐... 你怎么干起排版的活了?... :P

    代码我改好了... 你试试

    其实问题就在于 ie6 对 div 的解释和 table 是差不多的, 允许自动伸缩, 但 ff 就不行, 必须定义层高和层宽, 现在 ie7 向 ff 靠齐了... 用 div+css 要求就更高了

    <div id=\"demo\" style=\"width:300px; border:1px solid red; background: white; position: absolute;\">
    <div style=\"background: yellow; float:left; width: 107px;\"><img src=\"http://tw.yimg.com/i/tw/news/yimg/pimg_97x120.jpg\" border=\"0\"></div>
    <div style=\"float: right; width: 193px;\">LONDON - From soldiers who donned red Santa hats in Afghanistan to devoted worshippers visiting Bethlehem, Christians around the world celebrated Christmas Day with the sobering thoughts of peace and tolerance even as open war flared in Somalia.</div>
    </div>