容器部分之外的图像[重复]

Question

我有一个小问题我自己解决不了。 整个部分都在这样的容器内（需要保留它，因为我将元素与其他部分的元素垂直对齐。 使用 Flexbox 或网格在此容器内的正确位置显示图像没有任何问题，但正如您在插图中看到的那样，我需要图像始终贴在右侧，但保持在左侧的相同位置。这是绝对的，但是当我做绝对的广告时，我对上面的部分有疑问。有什么想法吗？

行为示例：https://www.bain.com/insights/how-to-give-feedback-on-agile-ideas/

<!-- Title & Category Section-->
<section class="container px-4 mx-auto mt-32">
<div class="grid grid-cols-12">
    <div class="col-span-8 col-start-4">
        <div class="mb-2 text-sm font-light">{{ range .Params.Categories }}
            <a href="{{ `categories/` | relLangURL }}{{ . | urlize | lower }}" rel="category tag">{{ . | humanize }}</a>
            {{ end }}
        </div>
    </div>
    <div class="col-span-8 col-start-4">
        <div class="mb-4 text-6xl font-bold"><h1>{{ .Title }}</h1></div>
    </div>
    <div class="col-span-7 col-start-4">
        <div class="mb-10 text-2xl">{{ .Params.Subtitle }}</div>
    </div>
</div>
</section>

<!-- Hero Area -->
<div class="container px-4 mx-auto ">
    <section class="flex flex-row">
        <div class="w-3/12 ">
            <div class="text-right">
                <div class="mb-6">{{ partial "posts/published-date.html" . }}</div>
                <div>{{ partial "posts/modified-date.html" . }}</div>
            </div>
            <div class="text-right">
                {{ partial "posts/reading-time.html" . }}
            </div>
        </div>
        <div class="r-9/12">
            {{ partial "posts/post-hero.html" . }}
      </div>
    </section>
</div>

<!-- Article In Brief-->

<!-- Article main content -->
<section class="container px-4 mx-auto">
    <div class="grid grid-cols-12">
        <div class="">
            <!-- Audio Player -->
            <div class="">{{ with (eq .Params.Audiopost "") }}
                <p>nothing to display</p>
                {{ else }}
                {{ partial "audio.html" . }}
                {{ end }}
            </div>
            <div class="mt-3 ml-1">
                <p class="text-xs">Audio</p>
                <p class="font-bold">Listen to the article</p>
            </div>
        </div>
        <div class="col-span-9 col-start-4">
            <article class="prose lg:prose-l">
                {{ .Content }}
            </article>
        </div>
    </div>
</section>

{{ end }}

和图片：

<img src="{{ .Params.Image | absURL }}" alt="{{ .Title }}" loading="lazy" class="absolute">
{{ else }}
<p>pas d'image</p>
{{ end }}

Answer 1

就这么做

.container {
   position : relative;
   right : 0;
}

这将使该容器对齐 Right 。跳这个工作..

详细阐述您的问题将帮助我们解决您的疑问