如何防止内容出现在 div 的边界之外？答案

【问题标题】：How to prevent content from appearing outside the borders of a div?如何防止内容出现在 div 的边界之外？
【发布时间】：2021-04-22 23:38:22
【问题描述】：

我有这段代码，但它不能按我想要的方式工作。

我的目的是创建一个带有图片的盒子。当有人将鼠标光标放在框上时，图片应该被一些信息文本替换，这些文本会向上滑动并覆盖图片，为您提供有关该图片的详细信息。但我最终遇到的情况是，信息文本出现在图片下方，并在您将鼠标悬停在图片上时向上滑动以覆盖图片。

* {
  /*padding: 0;
  margin: 0;*/
  box-sizing: border-box;
}

.main{
  float: left;
  margin: 10px;
}

.main, .front, .back {
  position: relative;
  height: 300px;
  width: 300px;
  display: block;
}

.back{    
  position: relative;
  padding: 10px 10px 10px 10px;
  text-align: justify;
  top: 0px;
  right: 0px;
  color: #fff;
  background-color: #333333;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.div-text {
  height: 220px;
}

.main:hover .back {
    display: block;
    top: -300px;
}

button {
        display: inline-block;
        padding: 0.35em 1.2em;
        border-radius: 0.5em;
        box-sizing: border-box;
        margin:3px;
        text-decoration: none;
        background-color: #fff;
        border: solid #32dc32;
        color: #33cc66;
        transition: all 0.2s;
    }

     button:hover {
                color: #fff;
                background-color: #33cc66;
    }

<div class="main"> 
  
  <div class="front">
    <img src="https://www.gardeningknowhow.com/wp-content/uploads/2019/04/lawn-pH.jpg" alt="Avatar" style="width:100%;height:100%;">
  </div>
  
  <div class="back">
    
    <div class="div-text">
      <h1>Image Name</h1>
      <p>Image description blah blah blah blah blah blah blah blah blah  </p>
    </div>
    
    <button>Read more</button>
  
  </div>
        
</div>

“back”div 中的内容不应该出现在之后您将鼠标悬停在“main”div 上，并且绝对不应该出现在框外 .但由于某种原因，它会在我悬停之前出现在它下方。

我应该怎么做才能使内容不会出现在“主”div之外。

【问题讨论】：

标签： css hover slide

【解决方案1】：

一个简单的解决方案是将.back div 包含在图片下方的.front 中。

它们仍然可见并位于另一个下方。这就是为什么您应该在.front 上使用overflow: hidden，这样它就不会显示超出其边界的内容。

注意：如果.back容器不在.front一内，overflow: hidden将不起作用。

请检查这个小提琴：https://jsfiddle.net/f7mopj3r/

【讨论】：

谢谢。它对我有用，但我不需要做你提到的所有改变。我只在“.front”类中包含“溢出：隐藏”，它对我来说非常有效。

【解决方案2】：

我的回答受https://stackoverflow.com/users/13146968/cristian-sarghe 影响，但我对其进行了简化。

您所要做的就是添加文本“overflow:hidden;”在“前”类中，它可以工作。

以下是问题中解决问题的代码的修改版本：

* {
  /*padding: 0;
  margin: 0;*/
  box-sizing: border-box;
}

.main{
  float: left;
  margin: 10px;
  overflow: hidden;
}

.main, .front, .back {
  position: relative;
  height: 300px;
  width: 300px;
  display: block;
}

.back{    
  position: relative;
  padding: 10px 10px 10px 10px;
  text-align: justify;
  top: 0px;
  right: 0px;
  color: #fff;
  background-color: #333333;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.div-text {
  height: 220px;
}

.main:hover .back {
    display: block;
    top: -300px;
}

button {
        display: inline-block;
        padding: 0.35em 1.2em;
        border-radius: 0.5em;
        box-sizing: border-box;
        margin:3px;
        text-decoration: none;
        background-color: #fff;
        border: solid #32dc32;
        color: #33cc66;
        transition: all 0.2s;
    }

     button:hover {
                color: #fff;
                background-color: #33cc66;
    }

<div class="main"> 
  
  <div class="front">
    <img src="https://www.gardeningknowhow.com/wp-content/uploads/2019/04/lawn-pH.jpg" alt="Avatar" style="width:100%;height:100%;">
  </div>
  
  <div class="back">
    
    <div class="div-text">
      <h1>Image Name</h1>
      <p>Image description blah blah blah blah blah blah blah blah blah  </p>
    </div>
    
    <button>Read more</button>
  
  </div>
        
</div>

谢谢克里斯蒂安。

【讨论】：