0

次のようなhtmlコードがあります。

<html>
<head>
    <title>Title</title>
</head>
<body style="max-width: 1680px;">

    <div style="float:left; width:100%">
        <div style="overflow: auto">
            <table style="width: 100%" border="1">
                <thead>
                    <tr>
                        <th>Col 1</th>
                        <th>Col 2</th>
                        <th>Col 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Elem11-------------------------------------------------</td>
                        <td>Elem12-------------------------------------------------</td>
                        <td>Elem13-------------------------------------------------</td>
                    </tr>
                    <tr>
                        <td>Elem21</td>
                        <td>Elem22</td>
                        <td>Elem23</td>
                    </tr>
                    <tr>
                        <td>Elem31</td>
                        <td>Elem32</td>
                        <td>Elem33</td>
                    </tr>

                </tbody>
            </table>
            <div id="footer" style="width: 100%; overflow: auto;">
                <span style="width: 300px; float: left">Some footer</span>
                <span style="width: 300px">Some footer2</span>
                <span style="width: 300px; float: right;">Some footer3---------------------------------------</span>
            </div>

        </div>
    </div>
</body>
</html>

問題は、スクロールが表示されたときに div#footer が正しく表示されないことです。そのため、div#footer はテーブルの右端に揃えられませんが、本来は正しく表示されるはずです (下の図を参照)。テーブルの最後の行であるかのように div#footer を動作させる方法は? 回答に CSS コマンドのみが含まれているとよいでしょう。

不要なスペース

ありがとうございました。

4

2 に答える 2

1

追加text-align:right

<span style="width: 300px; float: right; text-align:right">Some footer3-------------------------</span>

デモ

于 2013-03-12T08:06:30.447 に答える
0

セルの幅をパーセンテージに設定します。フッターの幅を設定するときはパーセンテージを使用します。パーセンテージを 3 に分割します。33% は 300px に等しくありません。または、最初の表と同じ書式設定の罫線なしの別の表を作成することもできます。

于 2013-03-12T09:50:44.083 に答える