如何以某種方式定位此文本？

Question

昨天我問了一個關於在圖像頂部旁邊對齊一些文字的問題，並且它有效。 但是現在我更加困難所以我決定創建一個JSFiddle：

的jsfiddle

這是我想要實現的目標的圖像：

在jsfiddle中，您必須使HTML窗口更大才能看到正確的大小。 它也必須是移動友好的，但我稍后會繼續努力。 如果您有任何建議，那就太棒了！

我必須輸入一些代碼來使用JSFiddle，所以這里是我的HTML的快速視圖：

                <aside class="previewPost" id="HTMLPreview">
                <article>
                    <div id="imageDiv">
                        <img src="img/avatar.png" alt="Avatar"  width="150" height="150" id="imageHTML"/>
                        <div id="personDiv">
                            VOORNAAM + ACHTERNAAM (AGE)
                        </div>
                        <div id="workDiv">
                            Beroep
                        </div>
                    </div>

                    <div id="headerDiv">
                        VOORNAAM schreef om Datum
                    </div>

                    <div id="postDiv">
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
                        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                    </div>      
                </article>
            </aside>        

編輯：所以我完全忘了說我實際上卡在哪里。

我堅持讓橙色盒子始終保持在正確寬度的圖像下方（不超過圖像的右側），不要讓紅色盒子進入黃色盒子。 我希望紅色框中的文字不要穿過左側的紅色邊框。 我希望能夠解釋它。 謝謝你的時間。

編輯2：

我決定采用“Naeem Shaikh”的解決方案，並更新了我的JSFiddle。 請看一下。

這是新問題：

如您所見，當我不使用空格鍵時，文本可以進入橙色區域，或者橙色區域中的文本將進入紅色區域。 這不是一個大問題，但如果有一個名字太長的人開始使用這個網站，帖子看起來會搞砸，我不希望這發生。 有沒有辦法給黑盒子（圖片1）一個無限長度的東西？ 或者也許需要某種文字包裝？

我該如何解決？

Answer 1

更新了小提琴。 關鍵是，在圖像div中使用名稱div和工作細節div如下： -

<div id="imageDiv">
    <img src="http://illinois.edu/assets/images/content/overview/coolstuff/cellphonewallpaper/cellphone_wallpaper_new/240x320/alma_240x320.jpg" alt="Avatar"  width="150" height="150" id="imageHTML"/>
    <div id="personDiv">FirstName + Lastname (AGE)</div>
    <div id="workDiv">Work</div>
</div>

這里的小提琴示例http://jsfiddle.net/d72pu95n/4/

Answer 2

你需要稍微改變你的html結構。 看到這個http://jsfiddle.net/d72pu95n/5/將personDiv和workDiv放在imageDiv

                     <div id="imageDiv">
                            <img src="img/avatar.png" alt="Avatar"  width="150" height="150" id="imageHTML"/>
                            <div id="personDiv">
                              FirstName + Lastname (AGE)
                            </div>

                            <div id="workDiv">
                             Work
                            </div>
                    </div>