我遇到span的问题，它正在改变我div的高度，打破了我实施的样式。
我有两张2乘2的图像，当我将鼠标悬停在它们上面时，我想要文字滚动。
然而，当我将鼠标悬停在它们上方并显示文本时，它会更改div的大小，因为我已将文本翻译了一定数量。
我已将div设为蓝色，以便您可以更好地了解正在发生的事情。
div自动获得高度。我的网站没有设置像素高度;一切都是用百分比制作的，所以看起来我不能隐藏溢出。
如果能解决这个问题，我们将非常感谢任何帮助。
/* CSS Document */
body {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
background-image: url("images/background/space2.jpg");
background-size: cover;
margin: 0px;
}
#navigation {
width: 17%;
height: 100%;
position: fixed;
z-index: 3;
margin-left: 8%;
background-color: black;
opacity: 0.8;
filter: alpha(opacity=80);
float: left;
}
.navigationbody {
width: 100%;
height: 50px;
border-bottom: 2px rgba(255, 255, 255, 0.1) solid;
text-align: center;
}
.navigationbody a {
text-decoration: none;
color: white;
font-size: 30px;
position: relative;
top: 15%;
}
.navigationbody a:hover {
opacity: 0.8;
filter: alpha(opacity=80);
}
#navcontent {
height: auto;
margin-top: 50%;
position: static;
background-color: ;
align-items: center;
align-content: center;
}
#icon {
width: 100%;
margin-bottom: 10px;
background-color: ;
margin-left: 15%;
}
#bodycontainer {
bottom: 200px;
}
#icon img {
width: 70%;
height: auto;
}
#container {
width: 100%;
position: fixed;
top: 0px;
bottom: 0px;
}
#contentcontainer {
width: 75%;
margin-left: 25%;
height: 100%;
z-index: 2;
float: left;
overflow-y: auto;
}
#contentcontainer:hover {
background-color: rgba(0, 0, 0, 0.3);
}
#content {
padding: 0px;
}
.about {
width: auto;
margin-top: 10%;
margin-bottom: 30%;
margin-left: 20%;
margin-right: 20%;
text-align: center;
padding-bottom: 20px;
border-bottom: dotted 2px rgba(255, 255, 255, 1.00);
}
.about a {
color: white;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.20);
}
.about h1 {
color: white;
border-bottom: dotted 2px rgba(255, 255, 255, 1.00);
}
.about h2 {
color: white;
}
.abouthome {
width: auto;
margin-top: 10%;
margin-bottom: 30%;
margin-left: 20%;
margin-right: 20%;
text-align: center;
padding-bottom: 20px;
}
.abouthome h2 {
color: white;
border-bottom: dotted 2px rgba(255, 255, 255, 1.00);
}
.abouthome a {
color: white;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.20);
}
.software {
width: 100%;
margin-top: 60px;
align-content: center;
background-color: ;
}
.software img {
width: 100px;
height: auto;
}
.software img:hover {
opacity: .5;
}
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
}
#contentgames {
right: 0px;
padding-left: 10%;
padding-top: 20%;
}
.games {
width: 45%;
height: auto;
overflow: hidden;
margin-right: 20px;
float: left;
transition: 0.5s;
position: relative;
background-color: aqua;
word-break: keep-all;
}
.games:hover {}
.games span {
color: white;
position: relative;
left: 10px;
bottom: 20px;
margin: 10px;
padding: 5px;
font-size: 0px;
opacity: 0;
transition: 0.5s;
align-content: center;
}
.games:hover span {
color: white;
position: relative;
bottom: 200px;
margin: 10px;
font-size: 18px;
opacity: 1;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steven game design</title>
<link rel="stylesheet" type="text/css" href="style3.css" />
</head>
<div id="navigation">
<div id="navcontent">
<div id="icon">
<img src="http://placehold.it/150x150">
</div>
<div id="bodycontainer">
<div class="navigationbody"></div>
<div class="navigationbody">
<a href="home.html">Home</a>
</div>
<div class="navigationbody">
<a href="about.html">About</a>
</div>
<div class="navigationbody">
<a href="blog.html">Blog</a>
</div>
<div class="navigationbody">
<a href="videos.html">Videos</a>
</div>
<div class="navigationbody">
<a href="pictures.html">Pictures</a>
</div>
<div class="navigationbody">
<a href="page6.html">Contact</a>
</div>
</div>
</div>
</div>
<body>
<div id="container">
<div id="contentcontainer">
<div id="contentgames">
<div class="games">
<a href="futurama.html"><img src="http://placehold.it/350x150" width="100%" height="auto" /></a>
<span> This is a simple game I started making in flash. All of the artwork was created in flash. Unfortunately I never completed the game many things don't work such as the score, taking damage, boss and many more
</span>
</div>
<div class="games">
<a href="futurama.html"><img src="http://placehold.it/350x150" width="100%" height="auto" /></a>
<span> This is a simple game I made in flash it took less than a week to create.</span>
</div>
<div class="games">
<a href="futurama.html"><img src="http://placehold.it/350x150" width="100%" height="auto" /></a>
<span> This is another simple game in flash I made over the course of a few days.</span>
</div>
<div class="games">
<a href="futurama.html"><img src="http://placehold.it/350x150" width="100%" height="auto" /></a>
<span>This is the game I am currently working on. It is my first 3d game. I am making it in the unreal engine 4.</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
如果目标是图像作为div的位置和大小以及其中的元素的决定因素，那么这个最小的响应示例应该提供一些示例：
https://jsfiddle.net/d7aab2x7/2/
关键代码将文本块设置为绝对定位，允许div约束它在图像周围的大小：
div {
border: 1px solid red;
display: inline-block;
width: 40%;
position: relative;
overflow: hidden;
}
img {
display: block;
width: 100%;
}
span {
position: absolute;
bottom: -50px;
background: green;
height: 50px;
transition: bottom 200ms ease-out;
}
对于这个HTML：
<div>
<img src="http://placehold.it/300x300" />
<span>Some text that will appear on hover of the image</span>
</div>
请注意：我使用最简单的例子重新创建，而我的小提琴仅使用CSS进行动画制作。希望这能为您提供答案，同时为下一个搜索此类内容的人提供一般用途。