图片库（图片/视频缩略图，顶部两条水平线）

Question

我的设计如下：

到目前为止，我已经完成了画廊，但现在卡住了如何使用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>

我使用了这个搜索结果：

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

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

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;}

希望它会有所帮助。