CSS主要內容右側的固定位置

我有一個主要內容區域爲960px的網站與margin:0 auto;我需要修復主要內容區域右側的一些社交圖標（如left:100%，所以它位於在主要內容區域之外，但附在右側）。CSS主要內容右側的固定位置

我無法使用絕對值，因爲他們希望按鈕始終在頁面滾動時在同一位置可見。我無法使用right:0，因爲它會將它放在瀏覽器窗口的右側，而不是該主要內容區域的右側。根據主要內容區域修復某些內容的最佳方法是什麼？如果需要，我可以調整標記。

編輯：這是我現在基本上爲標記。

<div class="mainContentArea"> 
    <div class="socialIconsWrapper"> 
     <div class="socialIcons">

來源

2017-08-29 Chief

請將您的HTML和CSS的使用 – RasmusGlenvig

'變換：平移X（-100％）;'和'離開：100％' –

請仔細閱讀並在我的答案發表評論，讓我知道如果有什麼不清楚或缺失。如果不是，那麼如果你能接受最能幫助你的答案，那將是非常好的。 – LGSon

將它放入頁腳部分的內容區域，然後使用左側：100％;

來源

2017-08-29 13:05:41

使用flex。

.main { 
 
    width: 980px; 
 
    height: 100px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    background: red; 
 
    justify-content: flex-end; 
 
} 
 

 
.social-icons { 
 
    align-self: flex-end; 
 
}

<div class="main"> 
 
    <div class="social-icons"> 
 
    <img src="http://lorempixel.com/50/50/" alt=""> 
 
    <img src="http://lorempixel.com/50/50/" alt=""> 
 
    <img src="http://lorempixel.com/50/50/" alt=""> 
 
    <img src="http://lorempixel.com/50/50/" alt=""> 
 
    </div> 
 
</div>

來源

2017-08-29 13:16:40

不幸的是，它是一個過時的網站，他們甚至沒有使用HTML5哈哈。希望現在有另一種全面支持瀏覽器的解決方案。 – Chief

@首頁什麼是全面的瀏覽器支持？ :) https://caniuse.com/#search=flex –

@RadovanSkendzic flex在IE中支持不好。即使在IE 11中我也遇到了問題。如果它是一個過時的網站，我認爲它不重要，但取決於是否會有很多流量來自IE。如果不是，使用flex是安全的，並且可能面向未來。 – DimSum

您可以使用left: calc(50% + 480px)設置的固定社交圖標的位置。舉例如下：

.page { 
 
    width: 100%; 
 
} 
 
.main { 
 
    width: 320px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    height: 800px; 
 
    background-color: grey; 
 
} 
 
.social { 
 
    width: 20px; 
 
    height: 20px; 
 
    position: fixed; 
 
    left: calc(50% + 160px); 
 
    background-color: red; 
 
}

<div class="page"> 
 
    <div class="main"> 
 
    <div class="social"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-29 14:19:39 DimSum

您可以嘗試使用jquery計算的主要內容區域外的正確的價值。我把$(window).resize()功能，以便每個屏幕的大小改變社會圖標包裝的權利的價值仍然存在。

下面是我如何拿出社交圖標右邊的值的步驟與固定在適當的位置：
-get從減法鴻溝window width
-substract window width到main content width
-The值2
-after那對。減去social icons wrapper width
- 那麼最後，你從主要內容區域獲得的社會圖標的價值包裝權

這是我的工作jsFiddle

$(document).ready(function(){ 
 
    $contrgt = $(window).width() - $('.mainContentArea').width(); 
 
    $socwd = $('.socialIconsWrapper').width(); 
 

 
    \t $('.socialIconsWrapper').css('right', ($contrgt/2)-$socwd+'px'); 
 

 
    $(window).resize(function(){ 
 
    $contrgt = $(window).width() - $('.mainContentArea').width(); 
 
    $socwd = $('.socialIconsWrapper').width(); 
 
    $('.socialIconsWrapper').css('right', ($contrgt/2)-$socwd+'px'); 
 
    }); 
 
    
 
    console.log('right='+$contrgt+'px'); 
 
});

*{ border-sizing: border-box; padding: 0; margin: 0; } /* used for global styling */ 
 

 
.mainContentArea{ max-width: 400px; margin: 20px auto; width: 100%; background: blue; color: #fff; } 
 
.socialIconsWrapper{ background: red; position: fixed; z-index: 99; } 
 
.socialIconsWrapper a{ color: #fff; }

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
 
    <div class="mainContentArea"> 
 
    <div class="socialIconsWrapper"> 
 
     <div class="socialIcons"> 
 
      <a href="">fb</a> 
 
      <a href="">twitter</a> 
 
      <a href="">youtube</a> 
 
     </div> 
 
    </div> 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
    some content here some content here some content here 
 
</div>

來源

2017-08-30 02:49:45 bellabelle

CSS主要內容右側的固定位置

回答

相關問題