代码之家  ›  专栏  ›  技术社区  ›  Alix Axel

CSS溢出问题

  •  3
  • Alix Axel  · 技术社区  · 14 年前

    我有以下代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Testing CSS</title>
    <style type="text/css">
    <!--
    body {
        background: #dddddd;
        font: 12px "Trebuchet MS", Helvetica, sans-serif;
        color: #000;
    }
    .box {
        background: #FFF;
        width: 500px;
        border: 1px solid #999999;
        -moz-border-radius: 5px;
    }
    .box .content {
        background: #FFF;
        padding: 15px;
        -moz-border-radius: 5px;
    }
    .message {
        border: 1px solid #bbbbbb;
        padding: 10px;
        margin: 0px 0px 15px;
        background-color: #DDDDDD;
        color: #333333;
        -moz-border-radius: 5px;
    }
    .message.info {
        border-color: #9FD1F5;
        background-color: #C3E6FF;
        color: #005898;
    }
    ._50\% {
        display: inline;
        float: left;
        margin: 0 2%;
        overflow: hidden;
        position: relative;
        width: 46%;
    }
    -->
    </style>
    </head>
    
    <body>
        <div class="box">
            <div class="content">
                <div class="message info">Info message.</div>
                <div class="message _50%">Simple message.</div>
                <div class="message _50%">Simple message.</div>
            </div>
        </div>
    </body>
    </html>
    

    display overflow 等等。。。似乎什么都没用。

    CSS Overflow http://a.imagehost.org/0658/Testing-CSS_1279773508176.png

    我错过了什么?

    5 回复  |  直到 14 年前
        1
  •  12
  •   Peter Ajtai    14 年前

    你的数学不太正确。

    让我们先看一下。。。。

    这个 Simple Message 盒子的宽度为:

    2% + 46% + 2% + (1 px BORDER on each side) + (10px PADDING on each side)
    

    CSS box model 表示填充、边框和边距的宽度被添加到CSS定义的元素宽度之外(理论上,实际上) older versions of IE don't follow this rule ,较新的版本有)。

    border padding 定义 .message 正在使你的孩子发胖 简单消息

    如果你把衣服的宽度 箱子占到41%,它们最后都在同一排。

    让我们看看细节来理解为什么。。。。


    崩溃

    class box
        500px wide with a 1px border all around
            Pixels left to play with ==> 500
    
    class content
        15px padding on the OUTSIDE of .content on all side. 
        content is INSIDE .box, the maximum width of .content is 500px
        but the padding is taking up some of this space (15*2 = 30px)
            Pixels left to play with ==> 470
    
    class message info
        The maximum width of anything inside .content is 470px
        There are two _50% boxes, so each can have a max total width
          (including all the padding, border, margin) of 470/2 = 235px
        Width of 
            + 46% of 470px = 216.2          = 216px 
            + 2*10px padding                =  20px
            + 2*1px border                  =   2px
            + 2*(2% of 470px) = 2*9.4 = 2*9 =  18px
            ---------------------------------------
                                              256px! ==> 2*256 > 470
    

    为什么41%的宽度有效?

    class box
            Pixels left to play with ==> 500
    
    class content
            Pixels left to play with ==> 470
    
    class message info
        Width of
            + 41% of 470px = 192.7          = 193px
            + 2*10px padding                =  20px
            + 2*1px border                  =   2px
            + 2*(2% of 470px) = 2*9.4 = 2*9 =  18px
            ---------------------------------------
                                              233px ==> 2*233 < 470
    

    42% of 470 = 197.4 = 197.
    197 + 20 + 2 + 18 = 237
    237 * 2 = 474........ and 474 > 470
    

    一般来说

    我建议你用 Firebug . 一定要在两个方向之间交替 Layout 选项卡,显示长方体模型和 Style 选项卡中,您可以临时测试更改您的CSS!

    .box .content {
          /* This lets .content expand in height with the floating divs inside it */
        overflow: auto;
    }
    
        2
  •  1
  •   jrista    14 年前

    首先,试着把 overflow: hidden 在你的.content元素上。在子元素上设置溢出对防止它们溢出没有多大好处。通过在包含元素上设置overflow:hidden,您(在大多数浏览器中)将强制它展开以包含其子元素。

        3
  •  1
  •   Matt Mitchell    14 年前

    我不确定使用 %

    您还可能发现宽度没有考虑边框(不同浏览器的框模型不同)。

        4
  •  0
  •   rob waminal    14 年前

    _50% 好像是两个人的总和 _50% 比…大 content px

    这个css适合我

    ._50\% {
        display: inline;
        float: left;
        margin: 0 2%;
        overflow: hidden;
        position: relative;
        width: 90px;
    }
    

    display: inline 或者 float 您需要计算容器的宽度和容器内div的宽度。特别是如果你有 margin padding

        5
  •  0
  •   zidane    14 年前

    由于.u50类中的边距,我会将宽度改为较低的值,例如41%。我还将删除position-relative和inline指令。

    ._50\% {
        float: left;
        margin: 0 2%;
        width: 41%;
    }
    

    添加新的class.clear,并在消息下面添加带有此clear类的新div,以便外部div可以扩展。

    .clear
    {
       clear: both;
    }
    

    ,五

    <body>
            <div class="box">
                <div class="content">
                    <div class="message info">Info message.</div>
                    <div class="message _50%">Simple message.</div>
                    <div class="message _50%">Simple message.</div>
                  <div class="clear"></div>
                </div>
            </div>
        </body>
        </html>
    

    仅此而已。浮点数是很好的工具,但你必须了解它们是如何工作的。