Question

我正在尝试实施此问题：How to set background image of outer div only to the right of inner div?

它出现在此代码中：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>？

如何让它发挥作用？

Answer 1

根据您发表的评论，＆＃34;但.top-row不应该是.top-row::after＆＃34;的父母，我怀疑您会混淆::after所做的事情

::after是虚拟元素的伪选择器，它位于所选元素的子元素的最后。

在您的代码中，::after中的.top-row::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。

为什么宽度为:: after元素的百分比不是根据父div计算的？

1 个答案: