jquery - 图片库 OnClick 问题

Question

我一直在尝试创建一个包含图片和描述下方的图片库。每次我点击图片时，它的边框都会变成红色。

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

1. 如果描述文字太长，它不会填充图片，而是会占据下面的空间。我希望文字向上移动，覆盖图像。正如您在示例中看到的，它还混淆了图片库组织。我该如何解决这个问题？
2. 每次我选择其中一张图片时，边框都会变成红色，但周围的图片会从原来的位置移动。我怎样才能避免这种情况？

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

			$('div.img').click(function() {
			  $('div.img').css('border-style', "hidden");
			  $(this).css('border', "solid 1px red");
			});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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>

Answer 1

“边界跳跃”:

问题是，您在第一次单击 时删除了边框。将原来的 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.