3

「rightBottomPart」を「rightPart」の一番下に配置したいのですが、「rightPart」を「leftPart」と同じ高さにしたいのです。問題は、「leftPart」のコンテンツの高さがわからないため、 「テキスト」の高さを設定しないでください (「テキスト」の高さで解決します)。

現在、次のようになっています。

代替テキスト

そして、私はそれを次のようにしたい:

代替テキスト

私のコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
</head>
<body style="margin: 0px 0px 0px 0px;">
    <div id="headers" style="background-color: Olive; width: 300px; height: 50px;"></div>
    <div id="text" style="background-color: Navy; position: relative; width: 300px;">
        <div id="leftPart" style="background-color: Gray; width: 200px; float: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div id="rightPart" style="background-color: Red; float: right;">
                <div id="rightTopPart" style="background-color: Lime; position: absolute; right: 0px; top: 0px;">top</div>
                <div id="rightBottomPart" style="background-color: Yellow; position: absolute; right: 0px; bottom: 0px;">bottom</div>
        </div>
    </div>
</body>
</html>

IE7 では正しく表示されますが、私がテストした他のブラウザーでは正しく表示されません。DOCTYPE-tag を削除すると、IE8 でも見栄えがしますが、Google Chrome では見られません。

私は何が欠けていますか？

ありがとうカール

4

1 に答える 1

3

フロートと位置を制御下に置くには、次の 2 つの点に注意する必要があります。位置は親要素に応じて絶対的であり、通常は寸法が必要であり、浮動オブジェクトにはデフォルトで寸法がありません。

あなたのテストは単純な 2 列のモデルを表しているので、この素晴らしい概要をここで見てください。

したがって、ここでの秘訣は、#text に float と pos:rel を与えることです。そうすれば、#right*Part はそれらがどこに配置されているかを知ることができます。

ここを見てください：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<style>
body             { margin: 0; }
#headers         { background: Olive; width: 300px; height: 50px; }
#text            { background: Navy; position: relative; width: 300px; display: block; float:left; }
#leftPart        { background: Gray; width: 200px; float: left;  display: inline-block; }
#rightPart       { background: Red; }

#rightTopPart    { background: Lime;     position: absolute; right: 0; top: 0; }
#rightBottomPart { background: Yellow;  position: absolute; right: 0; bottom: 0; }
</style>                                 

</head>
<body>
    <div id="headers"></div>
    <div id="text">
        <div id="leftPart">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div id="rightPart">
                <div id="rightTopPart">top</div>
                <div id="rightBottomPart">bottom</div>
        </div>
    </div>
</body>
</html>

よろしく、mtness

于 2009-11-19T11:42:11.170 に答える