1

現在プロジェクトに取り組んでいますが、コンテンツ領域を中央に配置できません。これは、ブラウザで調べたときにメインの#contentdivに高さがないことが原因だと思います。CSSの#contentで高さを割り当てましたが、このdivは割り当てられた属性を保持していないようです。

これは、＃contentdivを含むHTMLのスニペットです。

<div id="content">
    <div id="mainbox">
        <h1>title</h1>
        <h3>title</h3>
        <p>text</p>
        <ul>
            <li>Vivamus vestibulum nulla nec ante.</li>
            <li>Praesent placerat risus quis eros.</li>
        </ul>
    </div>
    <div id="relatedbox">
        <h1>Related</h1>
        <p>text</p>
    </div>
</div>

次に、要約されたCSSコードは次のとおりです。

#content {
    height: 500px;
    width: 825px;
    margin-left: auto;
    margin-right: auto;
}
#content #relatedbox {
    width: 200px;
    font-size: 10pt;
    background-color: white;
    margin: 1em 0.5em 1em;
    border: 3px solid #00824c;
    float: left;
}

私は「位置：相対」（および絶対）を含むかなりの数のことを試しましたが、これは他の多くの同様の問題の解決策のように見えました。しかし、私のものは修正しません。ボックスは右にレンダリングされますが、divの左側に固定されます。

アイデアや助けを事前に感謝します！

編集（解決策）：解決策を見つけたようですが、それが最善かどうかはわかりません。私のHTMLでは、文字通りdiv自体にスタイルを追加し、それを取得しました。#content divですべてのCSSコードをクリアできますが、他の依存関係があるため、＃contentIDを保持する必要があります。みんな助けてくれてありがとう！それを修正したコード： <div id="content" style="height: 500px; width: 850px; position: relative; margin-left: auto; margin-right: auto;">

4

5 に答える 5

0

overflow: hidden;#contentスタイルに追加してみてください。

于 2012-04-18T01:33:31.100 に答える
0

高さを保持できないdivがある場合、問題を修正するために使用できることがmax-heightあります。min-height

于 2012-04-18T01:34:54.293 に答える
0

IEを使用している場合は、<html>タグの前に以下を追加します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
于 2012-04-18T02:01:33.297 に答える
0

次のように、CSSをファイルから直接divに移動します。<div id="content" style="height: 500px; width: 850px; position: relative; margin-left: auto; margin-right: auto;">

于 2012-04-18T12:42:49.533 に答える
0

表示がの場合、inline無視されることがわかりましたwidth。に変更しましたがinline-block、動作しているようです。

于 2013-06-09T23:42:12.620 に答える