图片库 OnClick 问题

Question

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

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

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

这是我的例子： 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

使用 position: absolute 在图像上放置说明。
与其隐藏边框，不如将其设为颜色 transparent。

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

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

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

Answer 2

'border jump':

问题是，您删除了第一个 click 上的 border。将原来的 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.

图片库 OnClick 问题

Image Gallery OnClick issue

css

jquery

image-gallery