我目前正在创建一个网站，该网站由一页上的三个主要 div 创建。在每个 div 之间，我有一个微弱的 hr 来帮助视觉上“拆分它们”。
在我的第一个和第二个 div 之间，hr 显示正常。
第二个和第三个之间是我的问题 - hr 显示在第二个 div 下方。我感觉这与我的第二个 div 的容器的相对定位有关，但这是我在其中定位图像所必需的。
我尝试了 display:block 并将第二个 div 包装在另一个容器中，但没有任何效果。
我可以尝试使用带有背景/边框的 div 而不是 hr，但我不确定这是否是处理它的正确方法(我仍在学习解决问题的方法)。
下面是我的“第二个 div”代码和我试图定位的 hr。
<!-- PORTFOLIO -->
<div id="portfoliocont">
<div class="smallthumb" id="thumb1">
<a href="media/pamabest/pamabesttitle-large.jpg" class="overlay" data-lightbox="image-1" data-title="Pamabest" class="show">
<a href="media/pamabest/app-login.jpg" class="overlay" data-lightbox="image-1" data-title="Log in with your own account">
<a href="media/pamabest/tutorial.jpg" class="overlay" data-lightbox="image-1" data-title="Message your friends">
<a href="media/pamabest/app-profile.jpg" class="overlay" data-lightbox="image-1" data-title="Create your own profile">
<a href="media/pamabest/app-messages.jpg" class="overlay" data-lightbox="image-1" data-title="Message your friends">
<a href="media/pamabest/karaoke--menu.jpg" class="overlay" data-lightbox="image-1" data-title="Have a laugh">
<a href="media/pamabest/lists-viewlist.jpg" class="overlay" data-lightbox="image-1" data-title="Be prepared">
<a href="media/pamabest/mycar.jpg" class="overlay" data-lightbox="image-1" data-title="See the stats">
<a href="media/pamabest/weather.jpg" class="overlay" data-lightbox="image-1" data-title="Pack wisely">
<a href="media/pamabest/ticket5pariswhitestarstextured.jpg" class="overlay" data-lightbox="image-1" data-title="Front of 'Pamabest: Paris' ticket">
<a href="media/pamabest/ticketbackwhitestarstextured.jpg" class="overlay" data-lightbox="image-1" data-title="Back of 'Pamabest: Paris' ticket">
<a href="media/pamabest/travelticket2withbannertextured.jpg" class="overlay" data-lightbox="image-1" data-title="Front of 'Pamabest: Travel Pass' ticket">
<a href="media/pamabest/travelticket2backtextured.jpg" class="overlay" data-lightbox="image-1" data-title="Front of 'Pamabest: Travel Pass' ticket">
<img src="images/smallthumb/pamabest-small.jpg" alt="Imaginary music festival, Pamabest"/ title="Pamabest companion app">
<h1>"Pamabest" is a European, multi-cultural music festival aimed at 18-30 year olds.<br>A companion app would be used to help festival goers navigate the park and enhance their overall experiance.</h1></a>
<p>Pamabest music festival</p>
</div>
<div class="smallthumb" id="thumb2">
<a href="media/pisforpsychohd.mov" class="overlay">
<img src="images/smallthumb/psycho-small.jpg" alt="2 Minute video recreating a scene from the move, P is for Psycho" title="P is for Psycho video"/>
<h1>Filmed within a group, the video is a recreation of the 'bathroom scene' from the movie. <br>All editing was made in Premier Pro.</h1></a>
<p>P is for Pscyho</p>
</div>
<div class="smallthumb" id="thumb3">
<a href="media/silverlake/build/index.html" class="overlay" target="_blank">
<img src="images/smallthumb/silverlake-small.jpg" alt="Silverlake Website" title="Silverlake theme park website"/>
<h1>Silverlake theme park is based in the heart of Yorkshire, boasting a zoo and other child-friendly features. <br> The website was made with HTML5 and CSS3, graphical assests were made in Photoshop and Illustrator.</h1></a>
<p>Silverlake themepark</p>
</div>
<div class="blankthumb" id="thumb4"></div>
<div class="blankthumb" id="thumb5"></div>
<div class="blankthumb" id="thumb6"></div>
</div>
<hr>
还有我的 CSS
hr {
margin: 40px 0px;
border: none;
height: 1px;
color: #ececec; /* old IE */
background-color: #ececec; /* Modern Browsers */
}
/* PORTFOLIO
--------------------------*/
#portfoliocont {
position: relative;
margin-bottom: 40px;
display: block;
}
.smallthumb, .blankthumb {
display: inline-block;
position: absolute;
}
.smallthumb a {
text-decoration: none;
}
.smallthumb img {
-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.23);
-moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.23);
box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.23);
}
.blankthumb {
background: #f2f2f2;
width: 296px;
height: 174px;
}
#thumb1 {
left: 0px;
top: 0px;
}
#thumb2 {
left: 335px;
top: 0px;
}
#thumb3 {
right: 0px;
top: 0px;
}
#thumb4 {
left: 335px;
top: 250px;
}
#thumb5 {
right: 0px;
top: 250px;
}
#thumb6 {
left: 0px;
top: 250px;
}
#portfoliocont p {
padding-top: 10px;
color: #808080;
font-weight: 400;
}
.overlay h1 {
position: absolute;
/*display: inline-block;*/
height: 164px;
width: 276px;
bottom: 0;
top: 0;
color: white;
background-color: #806d9e;
opacity: 0;
font: 1em "Helvetica Neue";
text-align: left;
padding: 10px 10px 0px 10px;
line-height: 1.4em;
transition: transform 0.3s, opacity 0.3s;
-ms-transition: -ms-transform 0.3s, opacity 0.3s;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}
.overlay h1 br{
display: block;
line-height: 2em;
}
.overlay:hover h1{
opacity: 1;
}
#thumb1 a.show {
display: block;
}
#thumb1 a {
display: hidden;
}
谢谢
最佳答案
这里的问题是所有关于 position: absolute; 的大拇指
当浏览器使用 position: absolute; 渲染元素时它不占用任何空间。
在你的例子中，#portfoliocont “里面什么都没有”。我的意思是里面有任何东西 div占据任何空间。因此，它的高度为零。
在您的零高度 div 之后，浏览器继续呈现 <hr />标签。
我强烈建议不要绝对放置拇指。您还有许多其他选择，例如:
- 显示行内 block
- 向左浮动
- Flexbox(注意浏览器对这个的支持)
这是一个使用 inline-block 的简单示例对于大拇指:https://jsfiddle.net/Lfhctqkg/
关于html - <hr> 行出现在相对 div 下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32286364/