个人中心
gpt4 book ai didi

html - 两个不同的 div 之间有不需要的空间？

转载 作者：行者123 更新时间：2023-11-28 15:28:58 26 4
gpt4 key购买 nike

好吧，我想我知道为什么会这样了。正如您将看到的，我通过 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>

最佳答案

如果您将高度添加到剧集样式以匹配剧集文本的高度，该空白区域会折叠，我认为这就是您想要的:

episode {
    display: inline;
    float: left;
    height: 415px;
}

关于html - 两个不同的 div 之间有不需要的空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44916635/

26 4 0
文章推荐： html - 我的页脚不会粘在底部
文章推荐： javascript - 在 AngularJS 中使用 HTML 中的点表示法重复嵌套 JSON？
文章推荐： javascript - AngularJS 起源 http ://localhost:8080 is not allowed by Access-Control-Allow-Origin
文章推荐： javascript - 无法使用 Firefox 进行 ajax 发帖
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com