none
css RRS feed

  • 问题

  • <div style="width:950px; margin:auto;"> 

    <div style="float: left;background-color: #9999ff; width: 3%; height: 900px; position:relative; "></div>
    <div style="float: left;background-color: #099345; width: 37%; height: 250px; position:relative;"></div>

    <div style="float: left;background-color: #cc00ff; width: 30%; height: 250px; position:relative;"></div>
    <div style="float: left;background-color: #9900cc; width: 30%; height: 250px; position:relative; "></div> </div>
    四个DIV我就是如上设定的;可是为什么在IE中测试时,最后一个DIV却被挤到下一行呢?

     谢谢;
    大其心,可容天下之物; 虚其心,可受天下之善;
    • 已编辑 lfofiug 2009年7月30日 9:06
    • 已移动 Sheng Jiang 蒋晟 2009年7月30日 23:27 IE (发件人:ASP.NET 与 AJAX)
    2009年7月30日 8:58

答案

  • 四个div宽度超了浏览器边了自动往下移动 建议用px固定宽度 再用浮动
    如果您觉得对您有帮助,请在“是否有帮助”点“是”;如果你觉得回复很满意,请“标记为已解答”
    • 已标记为答案 lfofiug 2009年7月30日 9:35
    2009年7月30日 9:02
  • <div  style="float: left;background-color: #9999ff; width: 3%;  height: 250px; position:relative;"></div>
    <div  style="float: left;background-color: #099345; width: 37%; height: 250px; position:relative;"></div>
    <div  style="float: left;background-color: #cc00ff; width: 30%; height: 250px; position:relative;"></div>
    <div  style="float: left;background-color: #9900cc; width: 30%; height: 250px; position:relative;"></div>
    -- 你是否把第一个 div 多出来的,看成被挤出来的部分了吧

    知识改变命运,奋斗成就人生!
    • 已标记为答案 lfofiug 2009年7月30日 9:35
    2009年7月30日 9:11
    版主
  • 你再加一个总体div宽度固定一下套进那四个
    百分比有时候不准的bug
    如果您觉得对您有帮助,请在“是否有帮助”点“是”;如果你觉得回复很满意,请“标记为已解答”
    • 已标记为答案 lfofiug 2009年7月30日 9:35
    2009年7月30日 9:18
  • <div style="width:950px; margin:auto;padding:0;">
         
    <div  style="float: left;background-color: #9999ff; width: 3%;  height: 900px; position:relative;  padding:0;"></div>
         
    <div  style="float: left;background-color: #099345; width: 37%; height: 250px; position:relative;padding:0;"></div>  
        
    <div  style="float: left;background-color: #cc00ff; width: 30%; height: 250px; position:relative;padding:0;"></div>
          
    <div  style="float: left;background-color: #9900cc; width: 30%; height: 250px; position:relative; padding:0;"></div>    

    </div>
    你试试看呢
    Wenn ich dich hab’,gibt es nichts, was unerträglich ist.坚持不懈!http://hi.baidu.com/1987raymond
    • 已标记为答案 lfofiug 2009年7月30日 9:34
    2009年7月30日 9:21
    版主
  • 你用什么浏览器啊
    如果您觉得对您有帮助,请在“是否有帮助”点“是”;如果你觉得回复很满意,请“标记为已解答”
    • 已标记为答案 lfofiug 2009年7月30日 9:34
    2009年7月30日 9:31
  • 你可以百分比之和设置小于100%试试,不同的浏览器对于margin padding width的含义都有所不同 有一本叫css hack的书上有详细介绍
    Wenn ich dich hab’,gibt es nichts, was unerträglich ist.坚持不懈!http://hi.baidu.com/1987raymond
    • 已标记为答案 lfofiug 2009年7月30日 9:34
    2009年7月30日 9:34
    版主

全部回复

  • 四个div宽度超了浏览器边了自动往下移动 建议用px固定宽度 再用浮动
    如果您觉得对您有帮助,请在“是否有帮助”点“是”;如果你觉得回复很满意,请“标记为已解答”
    • 已标记为答案 lfofiug 2009年7月30日 9:35
    2009年7月30日 9:02
  • <div  style="float: left;background-color: #9999ff; width: 3%;  height: 250px; position:relative;"></div>
    <div  style="float: left;background-color: #099345; width: 37%; height: 250px; position:relative;"></div>
    <div  style="float: left;background-color: #cc00ff; width: 30%; height: 250px; position:relative;"></div>
    <div  style="float: left;background-color: #9900cc; width: 30%; height: 250px; position:relative;"></div>
    -- 你是否把第一个 div 多出来的,看成被挤出来的部分了吧

    知识改变命运,奋斗成就人生!
    • 已标记为答案 lfofiug 2009年7月30日 9:35
    2009年7月30日 9:11
    版主
  • 我想让这四个DIV在一行;

    一共950PX;里面四个DIV占100%;我想应该在一行;可是为什么最后一个DIV被挤到下一行;
    大其心,可容天下之物; 虚其心,可受天下之善;
    2009年7月30日 9:15
  • 你再加一个总体div宽度固定一下套进那四个
    百分比有时候不准的bug
    如果您觉得对您有帮助,请在“是否有帮助”点“是”;如果你觉得回复很满意,请“标记为已解答”
    • 已标记为答案 lfofiug 2009年7月30日 9:35
    2009年7月30日 9:18
  • <div style="width:950px; margin:auto;padding:0;">
         
    <div  style="float: left;background-color: #9999ff; width: 3%;  height: 900px; position:relative;  padding:0;"></div>
         
    <div  style="float: left;background-color: #099345; width: 37%; height: 250px; position:relative;padding:0;"></div>  
        
    <div  style="float: left;background-color: #cc00ff; width: 30%; height: 250px; position:relative;padding:0;"></div>
          
    <div  style="float: left;background-color: #9900cc; width: 30%; height: 250px; position:relative; padding:0;"></div>    

    </div>
    你试试看呢
    Wenn ich dich hab’,gibt es nichts, was unerträglich ist.坚持不懈!http://hi.baidu.com/1987raymond
    • 已标记为答案 lfofiug 2009年7月30日 9:34
    2009年7月30日 9:21
    版主
  • 谢谢你,试过 了;不行;
    大其心,可容天下之物; 虚其心,可受天下之善;
    2009年7月30日 9:22
  • 每个浏览器计算百分比不同 有些差别的
    如果您觉得对您有帮助,请在“是否有帮助”点“是”;如果你觉得回复很满意,请“标记为已解答”
    2009年7月30日 9:24
  • 谢谢你,试了一下;NO;
    大其心,可容天下之物; 虚其心,可受天下之善;
    2009年7月30日 9:30
  • 你用什么浏览器啊
    如果您觉得对您有帮助,请在“是否有帮助”点“是”;如果你觉得回复很满意,请“标记为已解答”
    • 已标记为答案 lfofiug 2009年7月30日 9:34
    2009年7月30日 9:31
  • 你可以百分比之和设置小于100%试试,不同的浏览器对于margin padding width的含义都有所不同 有一本叫css hack的书上有详细介绍
    Wenn ich dich hab’,gibt es nichts, was unerträglich ist.坚持不懈!http://hi.baidu.com/1987raymond
    • 已标记为答案 lfofiug 2009年7月30日 9:34
    2009年7月30日 9:34
    版主