0

私は初めて CSS レイアウトを試していますが、CSS の経験は非常に基本的なものです。私が達成したいのは、左側のパネルとコンテンツの 2 列のレイアウトです。
私はこれを見つけました：

#leftcontent
{
    position: absolute;
    left: 10px;
    top: 10px;
    width: 170px;
    border: 1px solid #C0C0C0;
    padding: 2px;
}

#centercontent 
{
    position: absolute;
    margin-left: 181px;
    border:1px solid #C0C0C0;
    top: 10px;
    //fix IE5 bug
    voice-family: "\"}\"";
    voice-family: inherit;
    margin-left: 181px;
}

これはFirefoxではうまく表示されますが、IE8のコンテンツは画面の右側からはみ出します#leftcontent.. どうすればこれを修正できますか?

これはおそらく非常に単純な修正ですが、私は実験して修正を探しましたが、おそらくうまくいくはずです。助けていただければ幸いです。

4

6 に答える 6

4

#leftcontent 要素を左にフロートさせてから、 #centercontent 要素のマージンを設定して補正することをお勧めします。

#leftcontent {
        float: left;
        width:170px;
        border:1px solid #C0C0C0;
        padding: 2px;
}

#centercontent {
        margin-left: 181px;
        border:1px solid #C0C0C0;
}
于 2008-11-03T23:46:34.180 に答える
1

列のレイアウトを行う私のお気に入りの方法は、float:left と right を使用することです。

colwrapper40em幅に設定されmargin-...:auto、divを中央に配置します（IE4またはIE5以外のすべてで、何らかの理由で）

footerのため、両方の列の後に表示されますclear:both。

font-size ( ctrl and + or -) を大きくすると、これは適切にスケーリングされ、列を列内に簡単にネストできます (3 列のレイアウトを行うには、同じことを行いますが、#colleft 内に 2 つの div を配置し、それらを左右にフロートします)。 )

#colwrapper{
    width:40em;
    margin-left:auto;
    margin-right:auto;
}
#colleft{
    float:left;
    width:10em;
}
#colright{
    float:right;
    width:30em
}
#footer{
    clear:both
}

そしてHTML：

<div id="colwrapper">
    <div id="colleft">
        left column!
    </div>
    <div id="colright">
        right column!
    </div>
    <div id="footer">
        footer!
    </div>
</div>
于 2008-11-04T02:27:46.743 に答える
1

#centercontent に幅を設定します。それがパーセンテージであろうと、探しているものになるピクセルサイズであろうと。

于 2008-11-03T23:48:02.883 に答える
1

floatこれを行うには、プロパティを使用します。優れた float チュートリアルはFloatutorialです。float を使用した場合の CSS の外観は次のとおりです。

#leftcontent {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    width: 170px;
    border: 1px solid #C0C0C0;
    padding: 2px;
}

#centercontent {
    float: left;
    margin-left: 10px;
    border: 1px solid #C0C0C0;
    margin-top: 10px;
}

これらの div の下に div を表示する場合は、次の CSS を使用する必要があります。

#contentbelow {
    clear: both;
}

また、フローティング要素には常に明示的な幅が必要なため、#centercontent の幅を設定する必要があります。

于 2008-11-03T23:59:42.470 に答える
0

他の人が言ったことfloatは助けになるはずです。 さらに、次の 2 つの点を確認してください。

  • 左のコンテンツに を設定してみoverflowましたか?許可されたスペースに何かが収まらない場合にブラウザが何をすべきかをよりよく理解できるようにします。
  • 左側のオーバーフローの原因となっている要素を探しましたか? 一部の要素はラップできず、幅が広すぎると、それらを収容するために div 全体の幅が強制的に引き伸ばされます。
于 2008-11-04T00:43:42.430 に答える
-8

テーブルを使用します。タスクにより適していて、実装がより簡単で、さまざまなブラウザー間での信頼性がはるかに高くなります。

于 2008-11-03T23:43:38.837 に答える