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

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; 
}