从宽度中移除水平滚动条

Question

我的目标是通过编写代码将图像和文本放置在背景上方，创建一种叠加效果。我已经成功地将图像在不同大小的屏幕中定位好了，但我的问题是图像的宽度会产生一个很长的水平滚动条。我正在寻找一种方法，在保留我的CSS样式的同时去掉滚动条。 全屏查看 移动设备查看 如您所见，宽度（1000像素）被用蓝色标出。 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;
}

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

• adding overflow hidden: the image gets cut and the scroll bar stays

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

• adding z-index: no change

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

- Button Press

---

你在CSS中使用了!important;，首先应该将其删除以查看它的工作原理。@media screen and (max-width: 576px) { width: 100%; } - Duc Hong

Answer 1

使用 max-width: 100%

示例：

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

你应该从@media中移除position、width和top属性，因为你已经在上面声明了相同的值。

- Delowar Hosain

Answer 2

我尝试复制并修改了您的问题，您可以在这里查看：

• 将所有内容块移动到外部，并将它们放在单独的块中。使用负边距上移此块一点，避免在此情况下使用absolute定位。
• 为背景div设置高度。

如您所见，我已删除了您CSS中的所有!important标志。在header-p中，添加.container类以使用默认的Bootstrap容器属性。默认情况下，它最大化宽度为1440px。您可以通过以下方式轻松覆盖此数字：

这部分我没有包含在CSS中，只是供您参考，以防您想更改宽度值。

@media screen and (min-width: 1200px) {
.container.header-p {
   max-width: 1000px;
}
}

.banner-partner-padding {
  height: 300px;
}

.container-header {
  margin-top: -40px;
  background: salmon;
}

.div-partner {
  flex: 0 0 auto;
  width: 13%;
  background: white;
  border-radius: 4px;
  padding: 5px 5px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  display: flex;
}

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

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="banner-partner-padding" style="background-image: url('https://placeimg.com/1000/300/nature'); background-size: cover;">
</div>
<div class="container container-header header-p">
  <div class="row">
    <div class="col div-partner text-center">
      <div class="div-partner-content">
        <img src="https://placeimg.com/128/128/people" class="partner-image">
      </div>
    </div>
    <div class="col my-auto pl-4 d-none d-sm-block">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio reiciendis reprehenderit veritatis eos saepe deleniti asperiores, impedit ad repellendus id eligendi adipisci animi blanditiis perspiciatis laboriosam esse delectus hic, labore commodi optio dolore ipsam. Labore, nesciunt! Corrupti asperiores sit temporibus cupiditate, sunt voluptatibus iure veniam repellat laudantium, aperiam soluta repudiandae.
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat animi nemo laborum facilis doloribus culpa sed numquam illum voluptates esse eaque quos quidem illo facere suscipit, hic, dignissimos totam unde soluta eius est voluptatem magni assumenda neque! Beatae quo perferendis cupiditate soluta, officia esse quam tempore ratione et doloremque aspernatur.</p>
    </div>
  </div>
</div>

演示链接：https://codepen.io/DieByMacro/pen/YzzBdZR 如果这是您对内容块的期望行为，请告诉我。

- Duc Hong