Javascript 保持图像静止，即'；的位置相对于附近的文本

在屏幕的正中央，我有一段文字和一幅图像。当文本变长时，图像被迫向右移动，这就是它应该做的。但我想让它做的是，让图像保持在同一个位置，让文本移到左边

（我还将添加更多名称，因此我需要此修复是通用的，而不是像手动更改每段文本一样。）

（可能很难看到，但很明显，是的，我正在使用模板…）

我试着在页面完全加载后修改HTML以获得正确的页边距，然后当它更新文本时，将页边距更改为正确的，但它完全没有做任何事情

非常感谢您的帮助，我不知道如何解决此问题。

这怎么办

#banner .content {
        display: inline-block;
        margin-right: 1%;
        max-width: 95%;
        padding: 6em;
        position: relative;
        text-align: right;
        vertical-align: middle;
        z-index: 1;
        float: left;
        width: 66%;
}

---

您可以通过为包含

内容

层定义

宽度

属性，然后向右浮动图像和文本来解决此问题

例如，如果希望文本的右侧与页面中心对齐，则图像+其左侧边距需要为包含

#banner.content

层宽度的一半

您的图像为

18rem

正方形，左边距为

3rem

您的包含

#横幅。内容
div需要
42rem
宽（（18+3）*2）

.Content
中的内容向右滑动，而
span.image
锁定在其右侧边缘。只要文本容器的宽度（
标题
）不超过“.content”宽度的一半，它将保持与图像左侧3rem的右对齐。避免使用css填充来定位控件，而是使用css边距属性。
Hey buddy！你的网站看起来不错，但是如果你能用相关的代码创建一个链接来帮助我们解决你的问题，那就更好了。好的，我现在就开始工作。好的，我更新了链接，将其降到了最低版本。试着用内联块元素来代替内联块元素，这可能有助于我进入main.css和我的，将内联块更改为内联flex，将块更改为flex，并将它们混合在一起，但也不起作用。我只是将其放入样式表中，但没有任何更改。我添加了这两种样式：float:left；宽度：66%；在你的网站上生活，它工作得很好。也许尝试清除cookies？我使用的是本地版本，所以我不必这么做。一秒钟图像仍在移动，所以只需删除float:left；并添加文本对齐：左对齐；到#横幅。在这里工作：D。
#banner .content {
    position: relative;

    width: 42rem;
    height: 18rem;

    text-align: right;
    vertical-align: middle;

    /* center div.content */
    margin: 0 auto;
    clear: both;
    display: block;

    z-index: 1;
}

#banner .content .image {
    width: 18em;
    height: 18em;

    border-radius: 100%;
    vertical-align: middle;

    margin-left: 3rem;
    display: inline-block;
}