1

次の例があります

<table align="right" border="1" cellpadding="1" cellspacing="1">
  <tbody>
    <tr>
        <td>
            test
        </td>
        <td>
             test
        </td>
    </tr>
    <tr>
        <td>
             test
        </td>
        <td>
             test
        </td>
    </tr>
  </tbody>
</table>

<div style="width: 100%; background-color: red">
   test
</div>

コードが実行されると、div がフローティング テーブルに入ります。これを変更できないように、テーブルをフローティングする必要があります。フローティング要素に入る他のコンテンツを止める方法はありますか?

4

6 に答える 6

1

1 つの解決策は、テーブルに明示的な背景色を与えることです。

<table style="background:white; float:right" ...

新しいJSFiddleを参照してください。

他の回答はすべて、div とテーブルの相対的な幅や位置などの他のプロパティを変更します。

于 2013-01-11T12:26:07.860 に答える
0

alignやborderなどの減価償却されたHTMLタグを使用しないようにしてください。セルパディングとセルスペースもスタイルで実現できますが、これは演習として残しておきます:)これにより、divが必要なだけのスペースを占めるようになります。テーブルとこのdivが含まれる親divのサイズがわかっている場合は、テーブルとdivの幅を固定値に設定するだけです。

<table style="float:right; border: 1px solid black;" cellpadding="1" cellspacing="1">
  <tbody>
    <tr>
        <td>
            test
        </td>
        <td>
             test
        </td>
    </tr>
    <tr>
        <td>
             test
        </td>
        <td>
             test
        </td>
    </tr>
  </tbody>
</table>

<div style="float:left; background-color: red">
   test
</div>

http://jsfiddle.net/Shnjt/

于 2013-01-11T12:22:18.757 に答える
0

@Mr.Lister...。

    <div style="width: 100%; background-color: red;float:left;">
       test
    </div>

フロート：左; コードに役立ちます。

幸運を！

于 2013-01-11T13:07:00.473 に答える
0

これを使って

<div style="90%; margin-left:auto; margin-right:auto;">
<table style="float:right;width:45%">
</table>
<div style="width:45%;background-color: red; float:left;">
   test
</div>
</div>
于 2013-01-11T12:22:43.063 に答える
0

div と table をフローティングさせたい場合は、両方と css:float: leftの幅を divと table に設定する必要がありfloat: rightます。

それ以外の場合は、から削除width:100%してdiv追加してみてくださいdisplay: inline-block。

于 2013-01-11T12:22:47.820 に答える
0

要素が前の浮動要素を尊重するかどうかを制御する css プロパティがあります。

ドキュメントは次のとおりです。 http://www.w3.org/wiki/CSS/Properties/clear

あなたが何を得たいのかわかりませんが、それは助けになるかもしれません。

于 2013-01-11T12:23:18.073 に答える