6

私はこのようなHTMLを持っています

<div id="wrapper">
    <div id="main">
        <p>test</p>
    </div>
    <div id="sidebar">
        <p>test</p>
    </div>
</div>

そしてCSS

#wrapper {
    width: 960px;
    margin: 0px auto;
}

#main {
    width: 790px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
}

#sidebar {
    width: 170px;
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
}

例： http： //jsfiddle.net/Hpwff/

問題は、両方のdivの合計が960pxであり、これは親コンテナ（#wrapper）と同じ幅ですが、互いに隣り合って浮かないことです。サイドバーまたはメインコンテナの幅を4px縮小して、収まるようにする必要があります。これはなぜですか、それを回避する方法はありますか？

4

5 に答える 5

14

2つの間に改行がありますdiv。それらはinline-blockであるため、それらの間の改行はスペースとしてレンダリングされます。スペースがないと、期待どおりに機能します。

于 2012-06-18T19:39:39.240 に答える
2

これを見てください：jsfiddle。メインブロックとサイドバーブロックにfloat：leftを追加する必要があります。そして、それらの後にクリアブロックを追加します。

于 2012-06-18T19:43:04.800 に答える
2 
<div id="wrapper">
    <div id="main">
        <p>test</p>
    </div><div id="sidebar">
        <p>test</p>
    </div>
</div>

</div>と の間にスペースを入れない<div>

于 2012-06-18T19:43:13.013 に答える
2

float を追加: left; 各divに追加すると、正常に機能します! 更新されたjsFiddle

更新されたコード:

#wrapper {
    width: 960px;
    margin: 0px auto;
}

#main {
    width: 790px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
    float: left;
}

#sidebar {
    width: 170px;
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
    float: left;
}​
于 2012-06-18T19:37:16.933 に答える
1

これは古いトリックの 1 つです。ラッピング コンテナー (#wrapper) のフォント サイズを 0px に設定してから、各子を必要なフォント サイズに設定する必要があります。

このトリックは、ほとんどすべてのブラウザーで機能します。ただし、今回は IE ではなく Safari がセットアップの認識に失敗しています。

したがって、コードは次のようになります。

#wrapper {
    width: 960px;
    margin: 0px auto;
    font-size:0px;
}

#main {
    width: 790px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
    font-size:16px;
}

#sidebar {
    width: 170px;
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
    font-size:16px;
}​

作成済みの jsfiddle でテストできます。うまく機能します。

于 2014-12-02T17:59:43.013 に答える