图库OnClick问题

Question

我一直在尝试创建一个包含图片和图片下方的图片库。每次我点击图像时，其边框必须变为红色。

但是，我遇到了两个问题......

1. 如果说明文字太长，则移动图像而不是填充图像占据下面的空间。我希望文本向上移动，覆盖图像。正如您在示例中看到的，它还混合了图库组织。我该如何解决这个问题？
2. 每当我选择其中一个图像时，边框变为红色，但周围的图像从原始位置移开。我怎么能避免这个？

这是我的例子： https://jsfiddle.net/azarew/0jgenant/

＆＃13;
＆＃13;
sse_request()
＆＃13;
			$('div.img').click(function() {
			  $('div.img').css('border-style', "hidden");
			  $(this).css('border', "solid 1px red");
			});
＆＃13;
div.img {
  border: 1px solid #ccc;
  background-color: black;
  opacity: 1;
}
div.img:hover {
  border: 1px solid #777;
  opacity: 0.8;
}
div.img img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 5px;
  text-align: center;
  /* styling bellow */
  background-color: black;
  font-family: 'tahoma';
  font-size: 10px;
  color: white;
  opacity: 0.8;
  /* transparency */
  filter: alpha(opacity=60);
  /* IE transparency */
}
* {
  box-sizing: border-box;
}
.responsive {
  padding: 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
＆＃13;
＆＃13;
＆＃13;

Answer 1

1. 使用position: absolute将描述放在图像上。
2. 不要隐藏边框，而是将其设为transparent。
＆＃13;
＆＃13;
$('div.img').click(function() {
  $('div.img').css('border-color', "transparent");
  $(this).css('border', "solid 1px red");
});
＆＃13;
div.img {
  border: 1px solid #ccc;
  background-color: black;
  opacity: 1;
  position: relative;
}
div.img:hover {
  border: 1px solid #777;
  opacity: 0.8;
}
div.img img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 5px;
  text-align: center;
  /* styling bellow */
  background-color: black;
  font-family: 'tahoma';
  font-size: 10px;
  color: white;
  opacity: 0.8;
  /* transparency */
  filter: alpha(opacity=60);
  /* IE transparency */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
* {
  box-sizing: border-box;
}
.responsive {
  padding: 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão.</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Forest" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Northern Lights" width="600" height="400">
    <div class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Mountains" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Forest" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Northern Lights" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Mountains" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Forest" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Northern Lights" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Mountains" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Trolltunga Norway" width="300" height="200">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Forest" width="600" height="400">
    <div class="desc">Add a description of the image heredsfsdfsdfsd ds dfgdf dfg fdg dfg dfgdf gff</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Northern Lights" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Mountains" width="600" height="400">
    <div class="desc">Add a description of the image here</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

'边框跳转'：

问题是，您删除了第一个border上的click。将原始border保留在那里，不要将其删除。其他人将border设置为transparent或原始（#ccc）颜色，但让它为一个像素！

$('div.img').css('border-color', "#ccc");

叠加层：

您必须将叠加层设置为position: absolute;，width: 100%和bottom: 0;才能将其置于div.img容器的底部。在您设置position: relatvie;的父级上，您已完成！

div.img {
  position: relative;
}

div.desc {
  position: absolute;
  bottom: 0;
  width: 100%;
}

<强> Working example.