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

Question

在屏幕的正中间，我有一段文字和一张图片。当文本变长时，图像被迫向右移动，这就是它应该做的事情。但我想要它做的是将图像保持在同一位置，并使文本转移到左侧。

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

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

My site - Updated link

我尝试弄乱HTML以便在页面完全加载后获得页边距权限，然后在更新文本时将页边距更改为，但它绝对没有。

感谢任何帮助，我不知道如何解决这个问题。

Answer 1

这个怎么样？

#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%;
}

Answer 2

您可以通过为包含width图层定义content属性，然后将图像和文本浮动到右侧来解决此问题。

例如，如果您希望文本的右侧与页面的中心对齐，则您的图像+它的左侧边距需要是包含{{1}的宽度的一半}。layer。

如果您的图片为#banner .content正方形，左边距为18rem，则您的3rem div必须为#banner .content宽（（18 + 3）* 2）

42rem

#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; } 内的内容向右滑动，.content锁定在右侧边缘。只要文本容器的宽度（span.image）不超过`.content＆＃39;的宽度的一半。它将从左侧的图像保持右对齐3rem。避免使用css-padding进行定位控制，而是使用css-margin属性。