好吧，所以我想我知道为什么会这样。正如您所见，我已通过bottom将带有背景图像的文本框放在其他图像之上。这是不好的做法吗？有更有效的方法吗？问题是我需要一个透明的图像，这样当你将鼠标悬停在图像上时，你仍然可以看到图片，而我无法通过两个背景图像来弄清楚如何做到这一点。
它在某种程度上起作用，但我认为它可能是不好的做法，当你看到的第二排图像无法居住在文本框的空间时，它会在我的屁股上咬我在bottom移动它们之前居住。我认为通过将它们全部放在一个div（rowTwo）中，我可以将它们全部作为单个单元移动。但它们似乎完全拒绝移动，甚至不包含在布局中的div内，您可以从虚线框中看到这是我想要的行。
也许这不仅仅是一个问题......我很抱歉。但如果有人可以帮助教育我，这将是太棒了！非常感谢。这是JSFiddle（对于那些奇怪的占位符图像感到抱歉）：
.rowOne {
padding-top: 50px;
display: block;
margin: auto;
height: 415px;
width: 1050px;
}
.rowTwo {
display: block;
margin: auto;
height: 415px;
width: 1050px;
border-style: dotted;
}
.episodeText {
background-image: url("fadeBox.png");
width: 350px;
height: 415px;
position: relative;
bottom: 437px;
opacity: 0;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.episodeText:hover {
background-image: url("fadeBox.png");
width: 350px;
height: 415px;
position: relative;
bottom: 437px;
opacity: 1;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.episodeImage {
position: relative;
display: block;
}
.episodeText a {
text-decoration: none;
display: inline;
}
.episode h1 {
font-size: 28px;
color: white;
padding-left: 10px;
padding-top: 20px;
text-align: center;
}
.episode p1 {
font-size: 18px;
margin-bottom: 50px;
width: 280px;
height:200px;
background: none;
color: white;
line-height: 20px;
text-align: inherit
}
.episode {
display: inline;
float: left;
}<!DOCTYPE html>
<head>
<link rel = "stylesheet" href = "dontgoogleit2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<a href="default.html">
<div class= logo>
<img src= "websitelogo.png">
</div>
</a>
<title>
pls dnt
</title>
<div class="topnav" id="myTopnav">
<a href="episodes.html" id="episodes">EPISODES</a>
<a href="sources.html" id="sources">SOURCES</a>
<a href="about.html" id ="about">ABOUT</a>
<a href="contactus.html" id ="contact">CONTACT US</a>
</div>
</head>
<body class=body>
<div class= "theEpisodes">
<div class="rowOne">
<div class="episode">
<div class= "episodeImage">
<img src="https://www.girlsgonestrong.com/wp-content/uploads/2016/07/longandlean-origin-and-insertion-example-350x415.png">
</div>
<div class= "episodeText">
<a href= "#sound">
<h1>
Episode 1: A Dental Disturbance
</h1>
<p1>
The first episode, and what better way to start than with a lovely little tool we use to start our day. Yes, that's right
the toothbrush. Where did it come from? Who invented it? Simple questions, unclear answers. There's a mystery afoot, and we're
going to point it out. Come one, come all and witness the birth of the most beloved and most hated of devices.
</p1>
</a>
</div>
</div>
<div class="episode">
<div class= "episodeImage">
<img src="https://www.girlsgonestrong.com/wp-content/uploads/2016/07/longandlean-origin-and-insertion-example-350x415.png">
</div>
<div class= "episodeText">
<a href= "#sound">
<h1>
Episode 2: A Dental Disturbance (Part II)
</h1>
<p1>
Ah yes, the exciting conclusion of our two-part series on toothbrushes. Are you on the edge of your seats?
Because a certain Saudi Arabian dentist has emailed a certain podcaster back. Yes, that's right. Hold on to
your miswaks. Plus, a dutiful dive into the murky depths of unclean mouths and minds, further investigations
into the first patented toothbrush, as well as other designs of the future and past.
</p1>
</a>
</div>
</div>
<div class="episode">
<div class= "episodeImage">
<img src="https://www.girlsgonestrong.com/wp-content/uploads/2016/07/longandlean-origin-and-insertion-example-350x415.png">
</div>
<div class= "episodeText">
<a href= "#sound">
<h1>
Episode 3: Nice to Meet Screw
</h1>
<p1>
Screws. So many screws. Who invented the screw? Why all of these beautiful shapes and where did they
come from? Which one's the best? All of these questions will be answered, kind of. Join us as we embark
on a journey through time. From the time of Ancient Greek mathematicians, Babylonian kings to a poor man
ahead of his time, a happy-go-lucky Canadian and crafty manufacturers.
</p1>
</a>
</div>
</div>
</div>
<div class="rowTwo">
<div class="episode">
<div class= "episodeImage">
<img src="https://www.girlsgonestrong.com/wp-content/uploads/2016/07/longandlean-origin-and-insertion-example-350x415.png">
</div>
<div class= "episodeText">
<a href= "#sound">
<h1>
Episode 4: Gothip Guys
</h1>
<p1>
Two normies discuss the roots and implications of goth culture. From the ancient tribes of Europe to the Bat Cave, we delve shallowly into a deeply misunderstood subculture. Who are the goths? What do they want? Where did they come from? Music. Literature. Art. Architecture. Don't Google It.
</p1>
</a>
</div>
</div>
<div class="episode">
<div class= "episodeImage">
<img src="https://www.girlsgonestrong.com/wp-content/uploads/2016/07/longandlean-origin-and-insertion-example-350x415.png">
</div>
<div class= "episodeText">
<a href= "#sound">
<h1>
Episode 5: IP-YAY
</h1>
<p1>
Things get a little out of hand as two very refined gentleman discuss the ins and outs of the beer industry--specifically craft beers and IPAs. Hear the confusing (and somewhat false) tale about where the IPA comes from. We also muse upon the definitions of the terms "craft beers" and "IPA"s. What does it all mean? What is it all pointing to? One thing is for sure, you shouldn't google it.
</p1>
</a>
</div>
</div>
<div class="episode">
<div class= "episodeImage">
<img src="https://www.girlsgonestrong.com/wp-content/uploads/2016/07/longandlean-origin-and-insertion-example-350x415.png">
</div>
<div class= "episodeText">
<a href= "#sound">
<h1>
Episode 6: Real Men Talk Pink
</h1>
<p1>
Pink. It's not just for girls anymore. But why was it ever a color "for girls"? How long had it been that way? Well, we'll do our best to answer all of your questions and also bloviate endlessly about our fragile male egos. From the early conception of pink, to the feminist movements, to the "Real Men Wear Pink" movement, we'll try our best to conquer the ever-shifting pink landscape.
</p1>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
如果您为剧集样式添加高度以匹配episodeText高度，则该空白空间会崩溃，我认为这就是您想要的：
episode {
display: inline;
float: left;
height: 415px;
}