CSS溢出问题

该死的，我总是对CSS感到沮丧。我一直在阅读书籍和文章/ tuturials，但CSS是PITA！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

我在想什么？

来源

2010-07-22 Alix Axel

在其浏览器（S），你遇到的问题？ – jrista 2010-07-22 04:49:37

@jrista：它们全部的最新版本。屏幕截图来自Firefox。 – 2010-07-22 05:00:05

您是否阅读过Eric Meyer的“CSS：The权威指南”？这是一个很好的基础。 – 2010-07-22 11:01:55

你的数学不太对。

让我们有点事眼球开始与....

的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，新版本）。

所以对于.message的border和padding定义育肥您Simple Message盒。

如果您将Simple Message框的宽度降低到41％，它们会在同一行上结束。

让我们来看看具体理解为什么....

击穿

OK，这里是你的箱子：

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看看事情。确保您在Layout标签（显示您的包装盒型号）和Style标签之间切换，您可以在其中暂时测试更改CSS！

对于折叠箱的问题，我建议：

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

来源

2010-07-22 05:43:48

......这是在统计边界之前可能会使百分比总数达到100％的四舍五入误差之前。 – Quentin 2010-07-22 05:47:08

伟大的解释，清除了事情。非常感谢！ – 2010-07-22 12:26:54

好数学在那里.. :) – 2010-07-23 00:28:52

首先，请尝试将overflow: hidden放在.content元素上。在子元素上设置溢出将不会很好地防止它们溢出。通过设置overflow：隐藏在包含元素上，您将（在大多数浏览器中）强制它展开以包含其子元素。

来源

2010-07-22 04:51:04 jrista

谢谢，现在简单的信息出现在框中，一个问题就出现了！他们仍然不是并排显示，但我相信我的数学是正确的（2 + 46 + 2）* 2 = 100. – 2010-07-22 05:02:52

尽量简单下好像有两个_50%比大与content和，而不是使用％宽度的总_50%的宽度，尽量使用px

这个CSS对我的作品

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

，如果你想通过display: inline或float使并排股利显示方面，你需要计算容器的宽度和div的容器内的宽度。特别是如果你有一个margin和padding，因为这些将占用空间。

来源

2010-07-22 04:54:47

您想在流体网站中使用％宽度。有很多理由使用％比px。 – Sphvn 2010-07-22 05:05:56

但是不应该相对单位解决这个问题？（2％+ 46％+ 2％）* 2 = 100％，否？ – 2010-07-22 05:06:51

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

你也许会发现你的宽度没有考虑到边框（跨浏览器的不同盒子模型）。

来源

2010-07-22 04:56:31

谢谢，但不应该相对宽度来解决不同盒子模型的问题？我的解释是，他们应该占有可用空间的100％，但如果没有，是否有解决方法？ – 2010-07-22 05:07:44

尝试删除内部消息的边界，看看会发生什么。然后尝试在“内容”上没有填充，因为宽度可能没有考虑到这一点。结合'px'和'％'总是一个灾难的秘诀（虽然有时显然是必要的）。 – 2010-07-22 05:12:41

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

这是所有。花车是很棒的工具，但你必须明白他们是如何工作的。

来源

2010-07-22 05:19:02 zidane

回答

相关问题