Question

昨天我问了一个关于对齐图像顶部旁边的一些文字的问题，并且它有效。但是现在我更加困难所以我决定创建一个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：

我决定采用#e; Naeem Shaikh＆＃34;的解决方案，并更新了我的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>

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

2 个答案: