0

ブラウザウィンドウに入力したいテーブルで問題が発生しています。幅は3列、高さは5行です。私の望ましい結果は、各セルが画面の幅の33％であり、各セルが画面の高さの20％であるということです。固定値はありませんが、代わりにパーセンテージですべてを実行したいので、常にブラウザを埋めるようにサイズ変更/拡大します。

問題は、幅は完全に機能しますが、ブラウザのサイズを変更すると、高さが同じように機能しないことです。各TR行を20％の高さに指定しましたが、そのようには機能していません。画面の下半分が空のままで、5つの行が指定した20％の高さに従わないことが起こります。1つの奇妙な例（試してみたとき）では、最初の行は高さの50％で、他の50％は下の4行でした。現在（以下のとおり）、これらの5行は画面の高さの約60％を占め、残りの40％は未使用です。私はCSSが嫌いだと言いましたか？

表は次のとおりです。

<div id="portrait" style="width:100%;height:100%;">
    <table cellpadding=0 cellspacing=0 border=1 style="width:100%;height:100%;">
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
    </table>
</div>

各レベルで幅と高さを定義し、次に親コンテナを念頭に置いて相対的なパーセンテージを定義します。画像タグがある最も内側のレベルでは、100％x100％に設定されているため、コンテナがいっぱいになります（幅はTDで33％、高さはTRで20％と定義されています）。

これが私が最初の画像まで上のhtmlを読む方法です。divは、ブラウザの幅の100％、高さの100％を使用するように設定されています。これには、テーブルという1つのアイテムのみが含まれます。テーブルは100％x100％に定義されていますが、それはもちろんその親コン​​テナーであるdivによって制限されますが、それも100％x100％であるため、テーブルはフルブラウザーサイズ（IMHO）である必要があります。TRは幅を100％と定義しているため、ブラウザの幅を埋めます。高さは20％に設定されているので、テーブルの高さの20％、つまり画面の100％の20％に固定する必要があると思います。TDは、幅33％（ブラウザーを埋めるために、33％の3列）および高さ100％（この列は、ブラウザーの高さの20％に設定された親TRの100％を埋めます）として定義されます。最後に、画像はTR / TDを満たすように設定されているため、100％x100％に設定されています。

4

4 に答える 4

1

スタイリングに以下を追加する必要があります。

html, body { height: 100% }

そしてあなたの

<td style="width:33%;height:100%;"><img style="width:100%;height:100%;" src="x.jpg"></td>

に

<td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>

ここで見ることができますhttp://jsfiddle.net/RFdSw/

于 2012-07-01T11:26:37.960 に答える
1

これがフィドルです：http://jsfiddle.net/surendraVsingh/R3aCb/

そして、ここに作業コードがあります：

HTML:

<div id="portrait" style="width:100%;height:100%;">
    <table cellpadding=0 cellspacing=0 border=1 height="100%" style="width:100%; height:100%;">
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
        <tr style="width:100%;height:20%;">
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
            <td style="width:33%;"><img style="width:100%;height:100%;" src="x.jpg"></td>
        </tr>
    </table>
</div>​

CSS

html, body{height:100%;}​
于 2012-07-01T11:27:52.813 に答える
1 
<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            html, body{height:100%;width:100%;margin:0;padding:0}
            #mytable
            {
                height:100%;
                width:100%;
                table-layout:fixed;
            }           
            #mytable td
            {
                width;33%;
                height:19%;
            }
            #mytable td img
            {
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div id="portrait" style="width:100%;height:100%;">
    <table cellpadding="0" cellspacing="0" border="1" id="mytable">
        <tr>
            <td><img src="bg-bottom.gif"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
        <tr>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
        <tr>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
        <tr>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
        <tr>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
            <td><img src="x.jpg"></td>
        </tr>
    </table>
</div>

    </body>
</html>

これはあなたのために行う必要があります。

于 2012-07-01T11:57:31.393 に答える
0

これを試して

#portrait {
    height: 0;
}
table {
    height: 100%;
}
tr {
    height: 20%;
}
于 2014-01-12T02:14:20.017 に答える