0

可変幅のテーブルと、テーブルの下のボタンを含む、幅が設定されていないコンテナー div があります。このボタンの右端がテーブルの右端と揃うように、このボタンを右にフロートさせたいと思います。次のようなことを行うと、IE <= 7 を除くすべてのブラウザーで正常に動作するようです。これはどのように正しく行われますか?

<head>
    <style>
#tableContainer {
    float: left;
}
#btn {
  float: right;
}

    </style>
</head>
    <body>
        <div id="tableContainer">
            <table>
                <tr>
                    <td>a b c</td>
                    <td>a b c</td>
                    <td>a b c</td>
                    <td>a b c</td>
                </tr>
            </table>
            <button id="btn">buttontext</button>
        </div>
    </body>
</html>

これが私が欲しいものの図です：

__________________
|                |
|       table    |
|________________|
             |btn|
             ‾‾‾‾‾
4

3 に答える 3

0

divからボタンを取り出すことはできますか? それはあなたの問題を解決するはずです。

それ以外の場合は、追加float:leftします#tableContainer table(推奨されません)

テーブルを別の div にラップし、その div を左にフロートすることもできます

また、テーブルの前にボタンを移動する必要があります

于 2013-04-05T05:04:48.100 に答える
0

さて、私が最終的に解決した1つの解決策は次のとおりです。

<head>
    <style>
#tableContainer {
    float: left;
}
#btncontainer {
  text-align: right;
}

    </style>
</head>
    <body>
        <div id="tableContainer">
            <table>
                <tr>
                    <td>a b c</td>
                    <td>a b c</td>
                    <td>a b c</td>
                    <td>a b c</td>
                </tr>
            </table>
    <div id="btncontainer">
                <button>buttontext</button>
    </div>
        </div>
    </body>
</html>

ここで行ったことは、ボタン コンテナを作成し、それに「text-align:right」を設定することです。別の方法として、btn-container をスキップして、代わりに text-align を table-container に配置することもできます。これは、左側に配置する必要のある要素が他にないことを前提としています (テーブルのボタンよりも幅が広い限り、テーブルの配置方法には影響しません)。私の場合。

私には、 text-align を使用してボタンを配置するのは本当に非論理的だと感じます。それについて何かコメントはありますか？

于 2013-04-06T13:07:03.627 に答える