Question

该死的，我总是对CSS感到沮丧。我一直在阅读书籍和文章/ tuturials，但CSS是PITA！

我有以下代码：

<!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，{{1}等等......似乎没什么用。

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

我错过了什么？

Answer 1

你的数学不太合适。

让我们开始一些眼球......

Simple Message框的宽度为：

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

超过50％！

CSS box model表示填充，边框和边距的宽度被添加到元素的CSS定义宽度的外部（理论上，在实践中older versions of IE don't follow this rule，更新的版本）

因此border的{{1}}和padding定义会增加您的.message框。

如果您将Simple Message框的宽度降至41％，则它们最终会在同一行上。

让我们看一下具体细节，以了解原因......

细分

好的，这是你的盒子：

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

最后42％不起作用，因为

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

一般

我建议使用Firebug查看内容。确保您在显示框模型的42% of 470 = 197.4 = 197. 197 + 20 + 2 + 18 = 237 237 * 2 = 474........ and 474 > 470标签和Layout标签之间切换，您可以在其中临时测试更改您的CSS！

对于崩溃框问题，我建议：

Style

Answer 2

首先，尝试将overflow: hidden放在.content元素上。在子元素上设置溢出对防止它们溢出没有多大帮助。通过在包含元素上设置overflow：hidden，您将（在大多数浏览器中）强制它展开以包含其子元素。

Answer 3

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

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

Answer 4

尝试简单地降低_50%的宽度，似乎两个_50%的总和大于content的总和，而不是使用％width，尝试使用px

这个css对我有用

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

如果要通过display: inline或float并排显示div，则需要计算容器的宽度和容器内div的宽度。特别是如果您有margin和padding，因为这些会占用空格。

Answer 5

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

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

添加新类.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>

就是这样。花车是很好的工具，但你必须了解它们是如何工作的。

CSS溢出问题

5 个答案: