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

CSS溢出问题

overflow css

Alix Axel · 技术社区 · 16 年前

我有以下代码:

<!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 回复 | 直到 16 年前

Peter Ajtai 16 年前

你的数学不太正确。

让我们先看一下。。。。

这个 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;
}

jrista 16 年前

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

Matt Mitchell 16 年前

我不确定使用 %

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

rob waminal 16 年前

_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

zidane 16 年前

由于.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>

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