如何为侧边栏预留空间以解决CLS（累积班次布局）问题？

Question

实时预览以便更好地分析：https://premiumerblogger.blogspot.com/2024/07/vegas-pro-plugins-that-you-need-to-know.html

你好， 几天来我一直在尝试解决这个 CLS（累积布局偏移）问题，但一直未能成功。

如图所示，当我重新加载页面时，首先加载

<main>

元素（文章内容），并使用

justify-content: center;

属性居中。但是当侧边栏（

<aside>

元素）加载时，它会将主要内容向左移动，从而导致 CLS 问题。我想为侧边栏保留空间，同时保持主要内容的宽度相同，并且所有内容（包括侧边栏）都位于页面中央。

我尝试了很多解决方案，但它们最终改变了我主页上的样式。 有谁是 CSS 专家并且可以在 AnyDesk 上与我一起共享我的屏幕吗？我们可以共同努力解决这个问题。我们将非常感谢您的帮助。太感谢了。 和 的 HTML 代码太长，但是这里是 CSS：

.maxC{margin-inline:auto;padding-inline:var(--contentPadding); max-width:var(--content-maxWidth)}    .mainB{gap:var(--contentSpace)} .mainB .blogB{width:calc(100% - (var(--sidebarWidth) + var(--contentSpace))); transition:width var(--tDuration), max-width var(--tDuration)} .mainB .blogB.item{max-width:var(--contentPost-maxWidth)} .mainB .blogB.static{max-width:var(--contentPage-maxWidth)} .mainB .sideB{gap:var(--contentSpace);width:var(--sidebarWidth); max-width:500px} .mainB .sideSticky{position:-webkit-sticky; position:sticky;top:calc(var(--headerHeight) + 10px)} .mainB .sideB .widget:not(:first-child){margin-top:var(--contentSpace)} .flex {
    display: flex;
}.flex.wrap {
    flex-wrap: wrap;
} .grow {
    flex-grow: 1;
} .flex.column {
    flex-direction: column;
}

.shrink {
    flex-shrink: 0;
}

这里是变量的值：

--contentPadding: 16px;      --content-maxWidth: 1300px; --contentSpace: 40px; --contentPost-maxWidth: 780px;     --sidebarWidth: 280px; --tDuration: .1s ease;

#CSS #HTML

Answer 1

您可以在

.mainB::before

加载时添加

aside

。一个简单的例子：

setTimeout(() => document.querySelector('.mainB').insertAdjacentHTML('afterbegin', '<aside class="sideB"></aside>'), 2000)

.mainB {
  --sidebarWidth: 80px;
  --contentSpace: 40px;
  min-height: 100px;
  flex-direction: row-reverse;
  justify-content: center;
  display: flex;
  width: min(400px,100%);
  margin: auto;
}

.blogB {
  width: calc(100% -(var(--sidebarWidth) + var(--contentSpace)));
  background-color: blue;
  flex: auto;
}

.sideB {
  gap: var(--contentSpace);
  width: var(--sidebarWidth);
  max-width: 500px;
  background-color: yellow;
  flex: none;
}

/* Here it is: */

.mainB:has(.blogB:only-child)::before {
  content: '';
  width: var(--sidebarWidth);
  flex: none;
}

<div class="mainB">
  <div class="blogB"></div>
</div>