將固定div固定到居中的主要div的右側

Question

有兩個div，一個是.main作為主要內容；另一個是.main 。 .aside一些設計裝飾之外。

我只想在桌面上顯示，所以我將其放在媒體查詢中。 當視口正好是1000px時，您可以完美地看到主右側的旁邊的銷釘，而沒有任何間隙或重疊。

但是當它大於1000px時，它們將開始重疊，這是我不希望發生的。 有沒有一種方法可以僅使用CSS來保持兩個div的關系，還是我需要JS？ 換句話說，aside的左邊緣總是附着在main的右邊緣上。

我嘗試使用calc() ，但是找不到正確的數學公式。 另請注意， position:fixed為一旁，因為在實際情況下，它的目標是更大的屏幕，元素更大，並且永遠不應觸發水平滾動條。

codepen

 body { margin: 0; } .main { max-width: 400px; height: 100px; margin: 0 auto; background: pink; } @media (min-width: 1000px) { .aside { position: fixed; left: 700px; top: 0; width: 200px; height: 200px; background: rgba(0, 0, 0, 0.5); } } 

 <div class="main"></div> <div class="aside"></div> 

Answer 1

left: calc(50% + 200px);使用left: calc(50% + 200px); 在aside元素上，這始終將其放置在水平中心的200px處：

 body { margin: 0; } .main { max-width: 400px; height: 100px; margin: 0 auto; background: pink; } @media (min-width: 1000px) { .aside { position: fixed; left: calc(50% + 200px); top: 0; width: 200px; height: 200px; background: rgba(0, 0, 0, 0.5); } } 

 <div class="main"></div> <div class="aside"></div> 

Answer 2

您可以使用以下公式。 您的main最大寬度為400px，屏幕的寬度為100％，因此兩側的邊距均為(100% - 400px) ，我們除以2得到的只有一側。

您也可以引入CSS變量，以便更好地處理此問題

 :root { --main-width: 400px; } body { margin: 0; } .main { max-width: var(--main-width); height: 100px; margin: 0 auto; background: pink; } @media (min-width: 1000px) { .aside { position: fixed; right: calc((100% - var(--main-width)) / 2); top: 0; width: 200px; height: 200px; background: rgba(0, 0, 0, 0.5); } } 

 <div class="main"></div> <div class="aside"></div> 

而且，如果您希望aside 不在外面，只需從之前的計算中刪除其寬度即可：

 :root { --main-width: 400px; } body { margin: 0; } .main { max-width: var(--main-width); height: 100px; margin: 0 auto; background: pink; } @media (min-width: 1000px) { .aside { position: fixed; right: calc(calc((100% - var(--main-width)) / 2) - 200px); top: 0; width: 200px; height: 200px; background: rgba(0, 0, 0, 0.5); } } 

 <div class="main"></div> <div class="aside"></div> 

如果要將其應用於左側，則邏輯相同。

((100% - width of main) / 2) - width of aside

要么

50% - (width of main/2) - width of aside