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

Posted 2023-03-07

【中文标题】容器部分之外的图像[重复]

【英文标题】：image outside of a container section [duplicate]

【发布时间】：2021-04-20 04:17:28

【问题描述】：

我有一个小问题我自己解决不了。 整个部分都在这样的容器内（需要保留它，因为我将元素与其他部分的元素垂直对齐。 使用 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 "  loading="lazy" class="absolute">
 else 
<p>pas d'image</p>
 end 

【问题讨论】：

你想把图片放在哪里？

在红色区域。 12 列，图像在第 3 列开始。但希望此图像始终触摸屏幕右侧（与全宽英雄图像相同，但仅在右侧）

类似的东西：bain.com/insights/how-to-give-feedback-on-agile-ideas

类似的东西：bain.com/insights/how-to-give-feedback-on-agile-ideas

【参考方案1】：

就这么做

.container 
   position : relative;
   right : 0;

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

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

【讨论】：

这就是我所做的，但是当我这样做时，我会转到下面的部分（在我的情况下是文章内容），它位于图像“下方”，它会破坏流程。