爲什麼:: after元素的寬度不是按父母div計算的？

我想實現這樣一個問題：How to set background image of outer div only to the right of inner div?爲什麼:: after元素的寬度不是按父母div計算的？

它呈現在這個codepen：http://codepen.io/anon/pen/WpNVmJ

我想要的是黃色圖像重演。它在該codepen中工作完美，但是當我嘗試在我的真實代碼中實現它時，它不起作用。

在現實圖像不固色，但條紋匹配的標題。基於漸變的解決方案不適用於此。

這是我真正的html：

<div class="off-canvas-wrap" data-offcanvas> 
    <div class="inner-wrap"> 

     <header> 
     <div class="top-row"> 
      <a href="/index.html" class="clickable-area"></a> 
      <div class="top-ad"> 
      <script> 
      </script> 
      </div> 
     </div> 
     ... 
     </header> 
     ... 
    </div> 
</div>

這是相關SCSS：

.top-row { 
    position: relative; 
    @media #{$large-up} { 
     height: 110px; 
    } 
    } 

.top-row::after { 
    content: ""; 
    display: block; 
    background: url("../images/above-menu-graphic-215-1px.png") repeat-x; 
    position: absolute; 
    top: 0px; 
    right:0px; 
    height: 110px; 
    width: calc(50% - #{$row-width/2}); 
}

獲得一個codepen工作是不可能的，或只是太多的工作，因爲我需要的基礎5個SCSS。

在鉻檢查表明::元素之後具有0
寬度當我改變寬度是公正calc(50%)或只是50%它顯示600px。
div top-row的寬度限制爲1200px，但標題是瀏覽器的大小。

寬度應該是header 50％，不top-row。

更確切地說，它應該是calc(50% - $row-width/2)和$ row-width/2正確計算爲600px（實際上rems），所以這不是問題。

爲什麼將this :: after元素的寬度設置爲如果它的父項爲<div class="top-row">而不是<header>？

如何使它工作？

來源

2017-02-26 Marko Avlijaš

該瀏覽器是否遵循正確的運算符優先順序？如果它不是'50％ - $ row-width/2'會以'0'出現。（如在：'（600像素 - 600px的）/ 2'） – Ouroborus

在codepen，父是1000像素，並且你告訴僞元件是'50％ - 500px'其是500 - 500 = 0 – pol

@Ouroborus - 鉻顯示編譯結果爲'calc（50％ - 37.5rem）' –

根據您所做的評論，「但.top-row不應該是.top-row::after的父親」，我懷疑你很困惑什麼::after。

::after是一個僞選擇在所選元素的孩子最後到來的虛擬元素。

在你的代碼，在.top-row::after的::after會出現在這裏：

<div class="top-row"> 
    <a href="/index.html" class="clickable-area"></a> 
    <div class="top-ad"> 
    <script> 
    </script> 
    </div> 
    ::after 
</div>

這樣一來，虛擬::after元素的父是.top-row。

來源

2017-02-26 18:31:39 Ouroborus

就是這樣，我已經把它作爲'header :: after'並且現在起作用。我之後認爲是兄弟姐妹，這對我來說很直觀。謝謝！ –

爲什麼:: after元素的寬度不是按父母div計算的？

回答

相關問題