0

ピクセルの計算が足りないという問題があります。

幅980pxのメインdiv（#page）があります幅980pxの子div（#content）があります

div（）の内部には、幅300ピクセルのdiv（）と幅676ピクセルの（＃right-pane）の#content2つのdiv（）があります。#left-pane

どちらも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>

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

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 に答える
1

サイトのテストにどのブラウザを使用していますか？

私はあなたのコードをフィドルに投げました、そしてそれは私のFirefoxでうまく見えます、それはあなたがおそらくIEで、そしておそらく非標準モードか古いバージョンのどちらかでそれを見ていることを示唆します。

その場合は、IE（つまり、古いバージョン）がボックスモデルと数学をどのように処理するかが原因です。IEの場合、300px + 676px +4px>980px。これを修正する最も簡単な方法は、幅に影響を与えるものを1〜2ピクセル減らすことで、おそらく修正されます。

于 2012-11-09T18:26:33.397 に答える