html - 图片库(带有顶部两条水平线的图片/视频缩略图)

Question

我的设计如下:

到目前为止，我已经完成了 gallery，但现在仍然坚持如何使用 css/html 添加前两行。请建议我如何在顶部添加这些行。

我的 html/css:

.gallery-images img{
	width: 100%;
	min-height: 250px;	
}

.gallery-images{
	padding: 8px;
	border: 0;
	border-radius: 0;
	-webkit-box-shadow: 0 0 10px #ccc;
	box-shadow: 0 0 10px #ccc;
	margin: 0;
}   

.gallery-content{
	margin: 15px 0; 
}
.gallery-content p{
	font-size: 16px;
	font-weight: bold;
	margin: 0; 
}

.gallery-content span{
	color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<section class="inner-bemployee-wrap clearfix">
<div class="col-md-4 col-sm-6 col-xs-12">
                   <div class="thumbnail gallery-images">
                     <img class="img-responsive" src="images/corporate-news.png" />
                     
                   </div>
                   <div class="gallery-content">
                     <p>Album Name</p>
                     <span>15 Photos</span>
                   </div>
                 </div>

               </section>

我用过这个soudo css:

.gallery-images:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: -8px;
    border-top: 3px solid #D09A77;
}

在顶部显示线条，但现在问题出在移动/表格中，这些线条不是 100% 根据图像拟合的。如何在不同设备上展开/拉伸(stretch)时根据图像限制线条。

Answer 1

Waqas，我认为这可以通过在 <div class="thumbnail gallery-images"> 正上方再添加两个 div 来完成。 .

试试下面的代码。

<div class="first-line"></div>
              <div class="second-line"></div>



.first-line{
 height: 2px;
width: 80%;
border-top: 1px solid #ccc;
padding-bottom: 4px;
margin: 0 auto;}

.second-line{
 height: 2px;
width: 90%;
border-top: 1px solid #ccc;
padding-bottom: 4px;
margin: 0 auto;}

希望对您有所帮助。