css - 画像を折り返しながら箇条書きを本文に揃える

Question

私は問題を解決しようとして完全に困惑しています..

下の画像が示すように、左側に画像、右側に画像を囲むテキストがあり、このテキストにはリスト (ul) もあります。箇条書きを残りのテキストと揃えたいのです。テキストの外側ではなく、その上に配置し、ぶら下がった段落を作成する代わりに、画像と単一のリスト項目内の行を互いに整列させたままにします..

これは可能ですか？

以下のHTMLが含まれています...

<div class="entry-content">
<img src="image.jpg" alt="Pinterest" />
<p>Haven’t worked out how Pinterest could benefit you? An image sharing site that allows users to "pin" what they find onto a virtual pin board for others to enjoy, last year it reached the 10 million monthly visitors mark, the fastest of any standalone site to do so</p>
<ul>
    <li>Integration: By connecting Pinterest with your website and other social media platforms you can publish your findings in a variety of ways.</li>
    <li>Collaboration: Pinterest can allow you to share ideas within your business or with clients. Why not invite people to collaborate with you on boards?</li>
    <li>Sharing: Position yourself as a valuable resource. Create a board for your niche subject and lead the way with new ideas in your industry.</li>
    <li>Information: Data is key to the growth and development of your business. Keep an eye on what&#8217;s being pinned, how often and by how many people.</li>
    <li>Enjoyment: Pinterest gives you the opportunity to represent your company in a way it&#8217;s never usually seen. Enjoy the challenge of showing your company in a new light and build your community by pinning the inspiration of other users.</li>
</ul>
<p>As a design and digital agency Pinterest is right up our street. We&#8217;ve  started using it to collage all the wonderful things we enjoy, including ideas for our studio, general food for thought and to help us find inspiration for our journal.</p>
<p>How are you using or planning to use Pinterest?</p></div>

CSSも含まれています..

.blog-post img       {width:auto; float:left; margin-bottom:10px; margin-right:40px;}
.blog-post p         {margin-bottom:26px;}
.blog-post .descr ul {list-style:none; margin-left:0; padding-left:1em; text-indent:-1em;}

以下に、私が目指しているもののモックアップを含めました。

Answer 1

これは古いと思いますが、将来の参考のために、これを試してください：

list-style-position: inside;

それをULまたはLI要素に追加します

Answer 2

画像の下部に余白を追加すると、テキストが元の位置に押し戻されます。