0

我的像素计算没有加起来有问题。

我有一个主 div ( #page) 是：980px 宽 它有一个子 div ( #content) 也是：980px 宽

在 div ( #content) 内有两个 div ( #left-pane)，宽度为 300px 和 (#right-pane)，宽度为 676 px。

它们都有一个 1px 的边框 - 水平看整个网站，这应该是 4px 的宽度。

所以，

300 像素 + 676 像素 + 4 像素 = 980 像素

尽管如此，我的 div ( #right-pane) 向下移动到 div ( #left-pane) 下方。为什么？

我在它们两个上都设置了填充和边距。

HTML：

<head>
<title>Brazil Learner | The easy was to master Brazilian-Portuguese</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="page">

<div id="top">
<img class="logo" src="images/logo.png" />
<ul class="social">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</div>

<div id="nav">
<div class="nav-button"><a href="#">Home</a></div>
<div class="nav-button"><a href="#">Lessons</a></div>
<div class="nav-button"><a href="#">Guides</a></div>
<div class="nav-button"><a href="#">About us</a></div>
</div>

<div id="content">

<div id="left-pane">
</div>

<div id="right-pane">
</div>

</div>

<div id="footer">
<div>

</div> <!-- Page closer -->

</body>

</html>

CSS：

html,body,p,ul,li,img,h1,h2,h3 {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

a {
text-decoration: none;
color: black;   
}

#page {
width: 980px;
margin: 0px auto;
}

/* Top */

#top {
border: 1px solid black;
overflow: hidden;
padding: 30px 30px;
}

.logo {
float: left;
width: 130px;
height: 130px;
}

.social {
float: right;
margin-right: 40px;
}

.social li {
display: inline;
margin: 0px 10px 0px 0px;
}

/* Nav */

#nav {
border: 1px solid red;
overflow: hidden;
margin-bottom: 20px;
}

.nav-button {
float: left;
width: 100px;
margin-right: 6px;
background-color: grey;
text-align: center;
}

/* Content */

#content {
margin-bottom: 20px;
overflow: hidden;
width: 980px;
}

#left-pane {
float: left;
width: 300px;
height: 700px;
border: 1px solid green;
}

#right-pane {
float: right;
width: 676px;
height: 700px;
border: 1px solid black;
}

/* Footer */

#footer {
float: left;
width: 980px;
height: 70px;
border: 1px solid blue;
}
4

3 回答 3

6

我不确定这是否有效，但添加它并查看它是否有效。

* {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}
于 2012-11-09T18:13:35.747 回答
1

您使用什么浏览器来测试您的网站？

我把你的代码扔在小提琴上，它在我的 Firefox 中看起来很好，这表明你可能正在 IE 中查看它，并且可能在非标准模式或旧版本中查看。

如果是这样，那是由于 IE（即旧版本）如何处理盒子模型和数学。对于 IE， 300px + 676px + 4px > 980px 。解决这个问题的最简单方法是将影响宽度的东西减少 1-2px，它可能会修复它。

于 2012-11-09T18:26:33.397 回答
1

要考虑 div 的宽度，您应该考虑 4 个组件

  1. div 本身的宽度（例如，这是您的文本所在的位置）
  2. 填充宽度（围绕上面第 1 点中提到的宽度）
  3. 边框的宽度（围绕填充）
  4. 边距（围绕边界）

所以，如果你搜索 CSS 盒子模型（一些例子在这里http://www.w3.org/TR/CSS2/box.html和这里http://www.w3schools.com/css/css_boxmodel.asp），您将能够看到可以帮助您的盒子模型。同样使用 jQuery，您可以使用以下方法检索每个部分的宽度：.width()、.innerWidth()和.outerWidth()。请注意，您可能需要进行一些计算才能找到边框宽度、填充宽度或边距宽度。

阅读 CSS 文档和 jQuery 文档以更清楚地了解它们是如何工作的。如果您需要一些具有可变宽度对象的精确值，有时您可能需要使用 jQuery 为您正确计算宽度。

于 2012-11-09T18:16:59.210 回答