Question

我的div容器出了问题。当绿色的div接触页面的边缘时，页面不会裁剪页面，而是增加了水平页面移位。我使用bootstrap4。如何避免这种情况？

感谢帮助。

#section2 img {
  float:right;
}

#section2 {
  margin-top:100px;
}

#section2 h2 {
  color: #323232;
  font-size: 70px;
  font-weight: 800;
  float: left;
  line-height: 80px;
  margin-top: 70px;
}

#section2 p{
  color: #494e53;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  float: left;
  margin-top: 30px;
}


.txt2 {
  margin-left: 50px;
}

.bg2{
  background-color: #00a998;
  height: 320px;
  z-index: -5;
    margin-top: -550px;
    margin-left: 100px;
}

<section id="section2">
      <div class="container">
        <div class="row">
          <div class="col-lg-5">
            <img src="https://image.ibb.co/hGq0Rd/111.png" alt="">
          </div>
          <div class="col-lg-7">
            <div class="txt2">
            <h2>Lorem ipsum dolor sit amet, consectetur</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
            
            
          </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 bg2"></div>
        </div>   
      </div>
    </section>

Answer 1

如果我说对了，问题是您要覆盖col-lg-12的边距，这会破坏其目的。您应该将div的类“ bg2”作为该col-lg-12的子元素，并给它一个position: relative使其保留在后台。

https://jsfiddle.net/mu2f0whr/6/

Answer 2

在overflow: hidden中添加#section2会隐藏容器之外的所有内容。

集装箱外DIV

2 个答案: