21

高さが 50px で幅が 100% に固定されたテーブルがあります。

そのテーブル内には、次のように同じ行に 2 つの div があります。

<table>
  <tr>
    <td>
      <div id="1"></div>
    </td>
    <td>
      <div id="2"></div>
    </td>
  </tr>
</table>

最初の div にはfloat:leftがあり、2 番目には がありfloat:rightます。

したがって、テーブルはページの 100% です。div2 でコンテンツをラップし、div1 で残りのスペースを埋めて、div2 が次のように右揃えになるようにします。

+--------------------------------------------------------------+
| [ DIV 1          (Expands)       ][ DIV 2 AND ITS CONTENTS ] |
+--------------------------------------------------------------+

そして、div1の内容が全行よりも少ない場合に現在得られるもの:

+--------------------------------------------------------------+
| [ DIV 1 ][ DIV 2 ]                                           |
+--------------------------------------------------------------+

テーブルがなくても、左右に直接浮かせて動作させることができますが、それらが「集まる」と、互いに隣り合うのではなく、互いに重なり合ってしまいます。

編集:ここに新しい jsfiddle を追加しました。これは実際の例です。左の div から 1 つを除くすべてのリンクを削除してみて、結果を確認してください。2 番目の div は一番右にある必要があります。私は自分自身を説明したことを願っています。

4

4 に答える 4

40

td の「colspan」プロパティを使用します。元：

    <td colspan=75%> info </td>
于 2013-02-13T20:51:24.193 に答える
18

width:100%をテーブルに追加して解決しました。

http://jsfiddle.net/HRT5E/1/

table {
    width:100%;
}
于 2013-02-13T21:25:20.983 に答える
0

まず、テーブルがページの全幅に設定されていないようです。幅スタイルまたは幅属性をマークアップに追加したい。

次に、右側の「div」(より正確に<TD>は ) に固定幅を設定すると、最初の幅が残りのスペースを埋めます。

他の人が指摘しているように、ラッパーテーブルは不要のようです。

于 2013-02-13T21:18:47.570 に答える