html - 从宽度中删除水平滚动

Question

我使用此代码的目标是将图像和文本定位在背景上方以创建一种叠加层，我已经将图像定位在所有尺寸上，但我的问题是宽度会创建一个长的水平滚动条。寻找一种在删除滚动条的同时保留我的 CSS 的方法。

全屏视图

移动视图

如您所见，宽度（1000px）以蓝色突出显示。

HTML

 <div class="banner-partner-padding position-relative" style="background-image: url('img/bg-banners/banner-partner.jpg'); background-size: cover;">
     <div class="header-p">
       <div class="row">
         <div class="col-6 div-partner text-center">
           <div class="div-partner-content">
             <img src="../img/uploads/<?php echo($rowMerchant['logosrc']); ?>" class="partner-image">
           </div>
         </div>
         <div class="col-6 my-auto pl-4 d-none d-sm-block">
           <?php  echo '<h3 class="bold-font color-white t-shadow-black d-none d-sm-block">'.$rowMerchant['businessname'].'</h3>'; ?>
         </div>
      </div>
     </div>
   </div>

CSS

.banner-partner-padding {
  padding-top: 250px;
}

.header-p {
  width: 1000px !important;
  position: absolute;
  top: 140px;
  left: 210px;
}

@media (max-width: 900px) {
  .header-p {
    width: 1000px !important;
    position: absolute;
    top: 140px;
    left: 50px;
  }
}


@media (max-width: 576px) {
  .header-p {
    width: 1000px !important;
    position: absolute;
    top: 140px;
    left: 30px;
  }
}

.div-partner {
    max-width: 13%;
    min-width: 13%;
    background: white;
    border-radius: 4px;
    padding: 5px 5px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    display: flex;
    align-content: center!important;
    align-items: center!important;
}

.div-partner-content {
    display:block;
    margin: auto auto;
    height: 100%;
}

.partner-image {
    width: 100%;
    height: auto;
    display:block;
    margin: auto auto;
}

我尝试过但没有用的解决方案：

• 添加溢出隐藏：图像被剪切并且滚动条保持不变

   .header-p {
     width: 1000px !important;
     position: absolute;
     top: 140px;
     left: 210px;
     overflow-x: hidden;
   }
  

• 添加 z-index：没有变化

   .header-p {
     width: 1000px !important;
     position: absolute;
     top: 140px;
     left: 210px;
     z-index: 1;
   }
  

标签： htmlcsstwitter-bootstrap

Answer 1

利用max-width: 100%

例子：

.header-p{
    max-width: 100%;
}

此外，您应该从中删除position, width & top属性，@media因为您已经在上面声明了相同的值