1

全て。特定のdivの幅を明示的に設定したにもかかわらず、それを無視するこの問題があります。ラッパーがあり、その中にサイドバーとコンテンツバーを並べて表示したい。コンテンツ バーがサイドバーを押しのけ、すべてのスペースを埋めているように見えます。

問題のコード:

#wrapper{
    font-family: "Georgia", serif;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -2em;
    width: 700px;
    position: relative;
}

#content{
    float: left;
    width: 400px;
    padding-left: 25px;
    padding-right: 50px;
}

#sidebar {
    float: right;
    width: 175px;
    padding-right: 25px;
}

そして、HTML は単に何とか何とか何とか一言で言えば

Lorem Ipsum をコンテンツのある場所に配置し、Lorem Ipsum をサイドバーに配置しました。クロムの要素インスペクターは、400px と宣言したにもかかわらず、コンテンツの幅が 700 ピクセルであることを示しています。私は本当にie6の互換性を気にしません。

http://imgur.com/A1w0aどのように見えるかです。

誰かがフィドルについて何か言った。私はこれを正しく行っていますかhttp://jsfiddle.net/R3Wyw/1/ 大きな Lorem Ipsum チャンクはより細く、400 ピクセルのテキストのみで、サイドバーは上に移動してその横に挿入する必要があります。

4

1 に答える 1

0

コードに基本的な HTML および CSS 構文の問題があります。

  • HTML 終了タグは記述する必要があり、絶対に記述</div>しないで</div id="content">ください。

良い：

    <div id="content" class="something" role="main">
      <p>Content</p>
    </div>

悪い：

    <div id="content" class="something" role="main">
      <p>Content</p>
    </div id="content" class="something" role="main">
  • CSS コメントは必ず記述/* a CSS comment */する必要があります。<-- HTML comment -->

投稿する前に、http: //validator.w3.org (HTML) およびhttp://jigsaw.w3.org/css-validator/ (CS)でコードを検証する必要があります(Firefox の Web Developer Toolbar 拡張機能を使用して、早くやって）。
エラーメッセージは少し不可解な場合がありますが、常に同じです;) Googleで説明を取得するか、SOでここに質問してください。

幅の問題については、要素と親に異なる背景色を追加して、どれが期待どおりではないかをよりよく確認します（そして、どれがフローティングの子しかないため、フローに実際のコンテンツがもうないため、高さがなく、背景色が表示されません...)。ライトブルー、ライトグリーン、ピンク、ライトイエローなど、これとMeasureIt！Fx の拡張子。

于 2012-08-11T09:22:29.573 に答える