该死的,我总是对CSS感到沮丧.我一直在阅读书籍和文章/ tuturials,但CSS是一个PITA！ 我有以下代码： !DOCTYPE htmlhtmlheadmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titleTesting CSS/titlest
我有以下代码：
<!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>
但无论我做什么,我似乎无法将两个“简单消息”并排显示,低于“信息消息”,我已经尝试过玩显示,溢出等等……似乎没什么用.
CSS Overflow http://a.imagehost.org/0658/Testing-CSS_1279773508176.png
我错过了什么？
你的数学不太对劲.让我们从眼睛开始……
简单消息框的宽度为：
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的边框和填充定义会使您的简单消息框变得肥胖.
如果将简单消息框的宽度降低到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;
}