-2

この例では、2 つのテキスト ブロックが左側で垂直方向に配置されていますが、(多くの調査と試行錯誤の結果) 両側で配置する方法を見つけることができません。

<div style="text-align: justify; padding: 10px;">some wrapped (long enough) text
    <table style="margin-left: -7px; width: 100%; border: 3px solid red">
        <tr><td>some wrapped (long enough) text</td></tr>
    </table>
</div>

これは単純化された例にすぎません。テーブルには、実際には複数の raws ans 列が含まれています。垂直方向の配置は、一方では div 内のテキスト、他方ではテーブル内のテキストに関係します。

質問を言い換えてみましょう: div 内のテーブルのサイズを変更して、ブラウザーに対して 100% になり、コンテナー div のマージンとパディングとは無関係になるようにすることはできますか?

width:(100%+7px); のようなものを追加できれば素晴らしいと思います。

最後に、この妥協/回避策にたどり着きました: 細い境界線 (1px)、マージンとパディング (%)、計算された幅 (%) も (> 100)。

4

2 に答える 2

0

ソリューションは と を使用float:leftしてfloat:rightいます。あなたの場合、必要なものを達成するには 2 つの div を使用するだけで十分です。デモをチェック

<div style="text-align: justify; padding: 10px;">
   <div style="float:left">some wrapped (long enough) text</div>
   <div style="float:right">some wrapped (long enough) text</div>
</div>

それでもテーブルを使用したい場合。それも可能ですが、ここでテーブルを使用するポイントがわかりません

<div style="text-align: justify; padding: 10px;">
       <div style="float:left">some wrapped (long enough) text</div>
       <table style="float:right;margin-left: -7px; border: 3px solid red">
        <tr><td>some wrapped (long enough) text</td></tr>
    </table>
</div>

デモをチェック

于 2013-06-22T11:13:24.117 に答える