我目前正在创建一个由一个页面上的三个主要div创建的网站。在每个div之间，我有一个微弱的小时，以帮助在视觉上将它们分开。
在我的第一个和第二个div之间，hr显示正常。
在第二个和第三个之间是我的问题 - hr显示在第二个div下面。我感觉这与我的第二个div的容器的相对位置有关，但是我需要将图像放在其中。
我尝试过显示：阻塞并将第二个div包装在另一个容器中，但其他任何东西都没有用。
我可以尝试使用带背景/边框的div而不是hr，但我不确定这是否是接近它的正确方法（我仍在学习处理事物的方式）。
以下是我的第二个div＆＃39;和我试图定位的时间。
<!-- 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;
}
由于
答案 0 :(得分：1)
这里的问题是position: absolute;
当浏览器使用position: absolute; 呈现元素时，它不会占用任何空间。
在你的情况下，#portfoliocont＆＃34;里面没有任何东西＆＃34; ..我的意思是div内的任何东西占据任何空间。因此，它的高度为零。
在零高度div之后，浏览器继续呈现<hr />标记。
我强烈建议不要绝对放置你的拇指。您还有许多其他选项，例如：
以下是使用inline-block作为大拇指的简单示例：https://jsfiddle.net/Lfhctqkg/