画像の周りにテキストエリアを囲みます

Question

私はダイアログの左半分にテキストボックスを、ダイアログボックスの右半分に画像を持っています。テキストボックスとイメージは同じポイントで垂直に開始しますが、テキストはイメージよりもはるかに長いと言います。

テキストがイメージの下にある場合（垂直方向）、テキストをダイアログ全体に拡大したいと思います。それはCSS/JSの使用によって可能ですか？

テキストは編集可能なので、テキストボックスを使用する必要があります。それが助けになるならば、私はAngularJSアプリケーションを開発しており、フレックスボックスを一般的にレイアウトに使用しています。

Answer 1

実際にはtextareaではありませんが、a contenteditabledivでこれを行うことができます。

<img style="float: right;" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png" /> 
 
<div contenteditable="true"> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo diam, suscipit sit amet est sed, tempus tristique ex. Nulla ultrices eu odio sit amet sollicitudin. Vivamus condimentum fermentum mattis. Nunc fringilla quam id leo suscipit, nec laoreet dolor ultrices. Nulla scelerisque augue non odio vestibulum, a luctus tellus aliquet. Curabitur eget ipsum ornare, rutrum libero vel, euismod eros. Vivamus tincidunt commodo orci, sed sodales ligula convallis quis. In erat quam, mollis vel rhoncus dapibus, pharetra at nunc. Nunc eget mi et ipsum scelerisque lobortis. Curabitur malesuada quam at varius tempus. Nulla in imperdiet augue. Praesent ultricies libero urna, vitae eleifend dui mattis ac. Etiam pellentesque sodales dui in scelerisque. Sed sed felis elit.</p> 
 

 
<p>Ut euismod nibh ac sagittis convallis. Curabitur tempor tortor neque, vel accumsan ex malesuada quis. Phasellus id metus condimentum, varius lacus ac, tincidunt leo. Maecenas tincidunt nibh eu nulla aliquet elementum. Donec varius sem aliquam nunc egestas dictum. Curabitur risus leo, semper et diam ut, consectetur congue purus. Proin porttitor sed diam sit amet volutpat. Aliquam lacinia, nibh vitae finibus blandit, dolor ligula ornare magna, ac dignissim arcu odio eget sapien. Sed dictum condimentum posuere.</p> 
 

 
<p>Cras auctor dolor eu arcu hendrerit, sit amet interdum magna malesuada. Pellentesque at porta mi. Donec fermentum finibus porttitor. Mauris at eros accumsan, tincidunt mauris in, scelerisque sem. Quisque tortor metus, ullamcorper vel mauris ac, pharetra dictum orci. Suspendisse non ullamcorper magna, ac scelerisque velit. Maecenas ut nunc et nunc ultrices tempor. Donec leo felis, vulputate suscipit viverra sed, scelerisque eu tellus. Aenean rhoncus odio nibh. Aliquam ac tellus orci. Vivamus tortor mi, tincidunt quis tortor a, sagittis aliquet felis. Mauris ac mattis mauris, in dictum sapien. Curabitur dignissim ex luctus ex semper consequat. Proin sed quam et massa venenatis fringilla nec eget dolor. Pellentesque eu tellus sodales, faucibus lorem eu, faucibus nulla. Nam eu nulla laoreet, malesuada nulla eget, posuere nisi.</p> 
 

 
<p>Ut fermentum, magna vitae fringilla elementum, est eros varius metus, nec hendrerit libero mi non est. Quisque vel malesuada ipsum. Aenean venenatis lorem sit amet urna molestie efficitur. Integer ut mi a urna fermentum lacinia at ac lorem. Praesent pellentesque est sed diam interdum viverra. Pellentesque lobortis ipsum congue, vehicula mi at, rutrum turpis. Maecenas sapien arcu, aliquet nec vehicula nec, gravida eget leo. Vestibulum magna est, ultricies at sem sit amet, egestas fermentum dui. Quisque gravida in orci eget ullamcorper. Nunc in lectus ac elit dapibus pulvinar. Morbi diam orci, vulputate eget luctus at, mattis eu nisi. Aenean sit amet lorem a quam placerat consequat. Cras varius tortor sit amet libero posuere maximus.</p> 
 

 
<p>Integer posuere ligula sapien, id iaculis odio accumsan in. Phasellus molestie quam quis fringilla mattis. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus fermentum urna et urna vestibulum faucibus. Pellentesque mauris quam, faucibus et porta et, mollis viverra mauris. Praesent consectetur orci purus, sed sagittis ligula sagittis quis. Integer lacinia ut libero quis feugiat. In ac arcu ac tellus tincidunt egestas lacinia nec neque. Suspendisse viverra velit massa, porta tincidunt nibh finibus vel. Maecenas fermentum nec massa quis tristique. Vivamus ut efficitur elit. Donec tempus, augue congue feugiat luctus, ante metus hendrerit risus, mollis vehicula tortor dolor id odio.</p> 
 
</div>

注意そのコンテンツの編集可能な要素は textarea単純で、フォーマットを可能にし、下にHTMLを使用することより複雑です。