像素不会加起来

Question

像素不会加起来

nod*_*sto 0 html css

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

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

在div(#content)内部有两个div(#left-pane),宽300px和(#右窗格),宽676像素.

他们两个都有一个1px的边框 - 横向看整个网站,这应该给4px的宽度.

因此,

300px + 676px + 4px = 980px

尽管如此,我的div(#right-pane)向下移动到div(#left-pane)之下.为什么？

我在两者上都有填充和边距设置为NONE.

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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mat*_*ele 6

我不确定这是否可行,但添加此内容并查看是否有效.

* {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，3 月前
查看次数：	150 次
最近记录：	10 年，3 月前