フローティングdivの周りに複数の行にまたがるテーブルの内容を囲む

Question

私のページの途中で私は2つの列と複数の行を持つ表を持っており、それぞれに動的に生成されるテキストの量が異なります。

div（固定サイズ）をフロートして、必要に応じて右上隅から必要な数の2番目の列にテキストを折り返して配置します。

たとえば、divの下部が3番目の行の途中にある場合、その行のテキストはdivの左端と下端を囲む必要があります。

これは意味があると思います。誰でも助けてくれますか？

Answer 1

私は、テーブル要素の正しい使い方だろうとは思いません。あなたの問題を解決するには、div要素またはp要素を使用する方がよいでしょう。赤い要素を右に浮かべると、それに続く要素がその要素を囲みます。テーブルを使用する場合は、テーブルの隣に3番目のカラムまたは絶対位置のdivを使用することを検討してください。

p { 
 
    margin: 0; 
 
    padding: 10px; 
 
} 
 
#wrapper { 
 
    width: 500px; 
 
} 
 
.row { 
 
    position: relative; 
 
    border-top: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
} 
 
.row:last-child { 
 
    border-bottom: 2px solid #000; 
 
} 
 
#table p:first-child { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 20%; 
 
    padding: 2%; 
 
    border-right: 2px solid #000; 
 
} 
 
#table p:nth-child(2) { 
 
    margin: 0 0 0 24%; 
 
    width: 71%; 
 
} 
 
#rightColumn { 
 
    border: 2px solid #000; 
 
    position: relative; 
 
    z-index: 1; 
 
    float: right; 
 
    background: #ff0000; 
 
    width: 20%; 
 
    margin: 0 0 2px 2px; 
 
}

<div id="wrapper"> 
 
    <div id="rightColumn"> 
 
    <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p> 
 
    </div> 
 
    <div id="table"> 
 
    <div class="row"> 
 
     <p>text text text</p> 
 
     <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
     text text text text text text text text text text text</p> 
 
    </div> 
 
    <div class="row"> 
 
     <p>text text text</p> 
 
     <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
     text text text text text text text text text text text</p> 
 
    </div> 
 
    <div class="row"> 
 
     <p>text text text</p> 
 
     <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
     text text text text text text text text text text text</p> 
 
    </div> 
 
    <div class="row"> 
 
     <p>text text text</p> 
 
     <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
     text text text text text text text text text text text</p> 
 
    </div> 
 
    <div class="row"> 
 
     <p>text text text</p> 
 
     <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
     text text text text text text text text text text text</p> 
 
    </div> 
 
    </div> 
 
</div>