gpt4 book ai didi

javascript - 我如何以某种方式定位此文本?

转载 作者:太空宇宙 更新时间:2023-11-04 13:15:09 25 4
gpt4 key购买 nike

昨天我问了一个关于对齐图像顶部旁边的一些文本的问题,它成功了。但现在我更加卡住了,所以我决定创建一个 JSFiddle:

JSFiddle

这是我想要实现的目标的图像:

Image 1

在 jsfiddle 中,您必须将 HTML 窗口放大一点才能看到正确的大小。它还必须是移动友好的,但我稍后会处理。不过,如果您有任何建议,那就太好了!

我必须输入一些代码才能使用 JSFiddle,所以这里是我的 HTML 的快速 View :

                <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。请看一下。

这是新问题:

Image 3

如您所见,当我不使用空格键时,文本可以进入橙色区域,或者来自橙色区域的文本将进入红色区域。这不是什么大问题,但是如果名字特别长的人开始使用这个网站,帖子看起来会很乱,我不希望这种情况发生。有什么方法可以让黑盒子(图 1)无限长吗?或者可能需要某种文本换行?

我该如何解决这个问题?

最佳答案

您需要稍微更改一下 html 结构。看这个http://jsfiddle.net/d72pu95n/5/personDivworkDiv 放在 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>

关于javascript - 我如何以某种方式定位此文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28408978/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com