为什么在未根据父母div计算元素之后的百分比的宽度

Question

我正在尝试实现以下问题：如何将外部DIV的背景图像设置在内部div的右侧？

？

它是在此编码器中提出的：http：//codepen.io/anon/pen/wpnvmj

我想要的是那个黄色的图像要重复。它在该编码epen中正常工作，但是当我尝试在实际代码中实现它时，它不起作用。

实际上，图像不是纯色，而是与标头匹配的条纹。基于梯度的解决方案对此不起作用。

这是我的真正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});
}

获得代码蛋白的工作是不可能的，或者是太多工作，因为我需要5 scss。

在铬中进行检查表明::元素的宽度为0。
当我将宽度更改为calc(50%)或50%时，它显示600px。
DIV top-row的宽度限制为1200px，但标头是浏览器的大小。

宽度应为header的50％，而不是top-row。

更确切地说，应该正确计算为calc(50% - $row-width/2)，而$行宽度/2的计算为600px（实际上是REMS），所以这不是问题。

为什么width witth ::元素在元素的设置之后，就好像是父级是 <div class="top-row">而不是 <header>？

如何使其工作？

Answer 1

基于您发表的评论，但.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。