CSS溢出问题

Question

CSS溢出问题

3

我总是对CSS感到沮丧。我一直在阅读书籍和文章/教程，但CSS真的很让人头疼！

我有以下代码：

<!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 我漏掉了什么吗？

- Alix Axel

1

你在哪个浏览器中遇到了这个问题？ - jrista

@jrista：它们的最新版本。截图来自Firefox浏览器。 - Alix Axel

1

你读过Eric Meyer的《CSS权威指南》吗？那是一个很好的基础。 - Paul D. Waite

@Paul D. Waite：我只有Eric Meyer的Pocket Reference。不过还是谢谢你的建议。 - Alix Axel

1

如果你将要经常使用CSS，那么阅读《权威指南》是非常值得的。你需要学习宽度、高度、浮动、定位和继承是如何工作的。 - Paul D. Waite

@Paul：我会尽快购买，再次感谢。 - Alix Axel

5个回答

1

首先，尝试在你的.content元素上添加overflow: hidden。在子元素上设置溢出不会对防止它们溢出产生太大的好处。通过在包含元素上设置overflow: hidden，在大多数浏览器中，您将强制其扩展以包含其子元素。

- jrista

1

谢谢，现在简单的消息已经出现在框内了，解决了一个问题！然而它们仍然没有并排显示，我相信我的数学是正确的（2 + 46 + 2）* 2 = 100。 - Alix Axel

1

我不确定使用 % 字符的 CSS 类是否有效（或得到广泛支持）。

您可能还会发现，宽度没有考虑边框（在不同浏览器中存在不同的盒模型）。

- Matt Mitchell

谢谢，但是相对宽度不应该解决不同盒模型的问题吗？我的理解是它们应该占据所有可用的空间，但如果没有，有没有绕过的方法？ - Alix Axel

1

尝试移除内部消息的边框并观察结果。然后尝试去掉content的填充，因为宽度可能没有考虑到这一点。组合使用px和％总是会导致问题（尽管有时显然是必要的）。 - Matt Mitchell

0

尝试简单地降低_50％的宽度，似乎两个_50％的总宽度比content的宽度大，而不是使用％宽度，请尝试使用px。

这个CSS对我有效。

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

如果你想让一个 div 通过 display: inline 或者 float 的方式并排显示，你需要计算容器的宽度以及容器内部 div 的宽度。特别是在你使用了 margin 和 padding 属性时，因为这些属性会占据空间。

- rob waminal

1

你想在流式网站中使用百分比宽度。使用百分比而不是像素有很多理由。 - Sphvn

但是相对单位不应该解决这个问题吗？（2% + 46% + 2%）* 2 = 100%，对吧？ - Alix Axel

0

由于._50类中的边距，我会将宽度更改为较低的值，例如41％。我还会删除相对位置和内联指令。

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

添加一个新的类.clear，并在消息下方添加一个带有此clear类的新div，以便外部div可以扩展。

.clear
{
   clear: both;
}

，v

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

就是这样。浮点数是一个很好的工具，但你必须了解它们的工作原理。

- zidane

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter Ajtai · Accepted Answer

你的数学还不太对。

首先，我们先大概看一下……

Simple Message框的宽度为：

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

这超过50%了！

CSS盒模型规定，元素的填充、边框和外边距的宽度将被添加到CSS定义的元素宽度的外部（理论上，在实践中，旧版本的IE不遵循此规则，新版本则遵循）。

因此，.message 的 border 和 padding 定义使得你的 Simple Message 盒子变得更大一些。

如果你将 Simple 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%不能工作，因为

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

一般建议

我建议使用Firebug查看问题。确保您在布局选项卡和样式选项卡之间切换，可以在样式选项卡中临时测试修改CSS！

对于折叠框问题，我建议：

.box .content {
      /* This lets .content expand in height with the floating divs inside it */
    overflow: auto;
}