2つの列にある画像の周りにテキストを流し込む方法は？

Question

私は、次の方法で画像の周囲にテキストフローを持ってしようとしています：

例えば、2列の画像を、「中央」の列と右の列にそれらの数が一つの画像で。私はディスプレイを介して "フローティングボックス"を試しました：インラインブロック。 display：table/display：table-cellを使用してテーブルのような設定を試しましたが、左側のテキストに正しい（変更された）幅を指定できませんでした。

（中央画像の下部とテキストの第二paragの見かけ上の位置合わせが不要です。）あなたの援助のための

感謝！

Answer 1

デモではfloatを使用しています。これで目的は達成できますか？

.column { 
 
    float: right; 
 
} 
 

 
.column img { 
 
    clear: both; 
 
    float: right; 
 
    margin: 5px; 
 
}

<div class="column"> 
 
    <img src="http://via.placeholder.com/100x100" /> 
 
    <img src="http://via.placeholder.com/100x100" /> 
 
    <img src="http://via.placeholder.com/100x100" /> 
 
</div> 
 

 
<div class="column"> 
 
    <img src="http://via.placeholder.com/200x200" /> 
 
</div> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor 
 
    lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra 
 
    diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor 
 
    lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra 
 
    diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor 
 
    lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra 
 
    diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>