如何阻止伪元素更改其他元素的宽度？

Question

我正在尝试将一个伪元素作为背景图像，它只是在文档的宽度上进行裁剪。但是，当我在其中放一个背景图像时，它会不断地扩展文档的宽度，使其他一些div变得非常宽。

具体来说，您可以从屏幕截图中看到nav正在扩展其宽度以适应伪元素的背景图像。

我的尝试：

​

我看到了它的实现，但不是区别，因为实际伪元素中的代码是相同的。举个例子：

​

HTML：

    <nav class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container nav-down">
            <div class="navbar-header page-scroll">
                <a class="navbar-brand" href="/"><img src="/static/ScoopsLogo.png" alt="${out.global.siteName} Logo"></a>
                <p class="navbar-blog"><a href="https://blog.scoops.io/">Blog</a></p>
            </div>
        </div>
        <div id="scroll-progress">
            <div id="scroll-progress-bar"></div>
        </div>
    </nav>
    <section id="home">
        <div class="home-1">
          <div class="home1-1">
            <h1>Sound smart at the dinner table</h1>
            <h5>Learning made easy & fun</h5>
          </div>
        </div>
        <div class="home-lessons fade-in-up-static delay-2">
            <!-- List of Lessons -->
            <h5 class="text-center">NEW SCOOPS</h5>
            <div class="lessons-list">
            </div>
        </div>
     </section>

CSS：

.navbar {
    min-height: 50px;
    margin-bottom: 20px;
}
.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
.container {
    max-width: 600px;
}
.navbar-custom {
    .navbar-header {
      width: inherit;
      max-width: inherit;
    }
    .navbar-brand {
        img {
          width: auto;
          height: 100%;
        }
    }
    .navbar-blog {
      float: right;
      padding: 10px;
      margin: 3px 10px 0 0;
    }
}
.home-lessons {
    width: 100%;
    padding: 3%;
    @media (min-width: $screen-md-min) {
      margin-bottom: 20px;
      padding: 20px 40px;
    }
    h5 {
      margin-top: -100px;
    }
    &::before {
      content: '';
      background-image: url(/static/Scoops-Icons.png);
      background-size: cover;
      width: 500px;
      height: 500px;
      display: block;
      position: absolute;
      margin-left: 200px;
      margin-top: -200px;
    }
  }

Answer 1

我刚刚回答了一个与you put a bounty on over here非常相似的问题。在这种情况下，我认为您最好的选择是在后台执行一个最大宽度的伪元素，或者在您的文档中删除overflow-x。

下面是您的CSS修补程序的一个狙击手：

.home-lessons {
    width: 100%;
    padding: 3%;
    @media (min-width: $screen-md-min) {
      margin-bottom: 20px;
      padding: 20px 40px;
    }
    h5 {
      margin-top: -100px;
    }
    &::before {
      content: '';
      background-image: url(/static/Scoops-Icons.png);
      background-size: cover;
      width: 500px;
      height: 500px;
      display: block;
      position: absolute;
      margin-left: 200px;
      margin-top: -200px;
      max-width: calc(100% - 200px); /* HERE IS THE FIX */
    }
}

如果这样做不起作用，那么快速的解决办法就是这样做：

html {
    overflow-x: hidden;
}

我见过一些人使用，html, body作为他们的CSS选择器，这有点过火，这取决于你。

Answer 2

父元素应该使用position: relative，而子元素应该使用top: 0和left: 0。

如下所示：

.parent {
    position: relative;
}
.child {
    top: 0;
    left: 0;
}