使超链接响应

Question

<div class="row">
    <div class="col-md-3">
       <a class="mylink img-responsive" href="#"></a>
    </div>
    <div class="col-md-3">
       <img src="/image1.jpg" class="img-responsive">
    </div>
    <div class="col-md-3">
       <img src="/image2.jpg" class="img-responsive">
    </div>
    <div class="col-md-3">
       <img src="/image3.jpg" class="img-responsive">
    </div>
</div>

导致以下布局：

如何使链接响应，与图像具有相同的高度？

mylink定义如下：

a.mylink
{
    display:block;
}

任何想法？ 感谢

Answer 1

使用display: flex尝试以下解决方案。

CSS：

.row {
  display: flex;
}
.col-md-3 {
  flex: 1;
  background-color: green;
}
a.mylink {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  background-color: red;
}

<强> HTML：

<div class="row">
  <div class="col-md-3">
    <a class="mylink img-responsive" href="#"></a>
  </div>
  <div class="col-md-3">
    <img src="/image1.jpg" class="img-responsive">
  </div>
  <div class="col-md-3">
    <img src="/image2.jpg" class="img-responsive">
  </div>
  <div class="col-md-3">
    <img src="/image3.jpg" class="img-responsive">
  </div>
</div>

Answer 2

这可能是一种廉价的解决方法，但它确实有效：

Bootply

首先，将您的图片添加到链接内的第一列：

<div class="row">
    <div class="col-md-3">
       <a class="mylink img-responsive" href="#">
         <img src="https://digwp.com/wp-content/blog-images/blank-thumb.png" class="img-responsive invis"></a>
    </div>
    <div class="col-md-3">
       <img src="https://digwp.com/wp-content/blog-images/blank-thumb.png" class="img-responsive">
    </div>
    <div class="col-md-3">
       <img src="https://digwp.com/wp-content/blog-images/blank-thumb.png" class="img-responsive">
    </div>
    <div class="col-md-3">
       <img src="https://digwp.com/wp-content/blog-images/blank-thumb.png" class="img-responsive">
    </div>
</div>

接下来，应用以下样式：

a.mylink
{
    display:block;
}

div {
 border: 1px solid black; 
}
.invis {
   opacity: 0;
  }

这意味着4列实际上完全相同，但将第1列的不透明度设置为0会隐藏图像！

如果你的链接需要文字，你可以在第一个div中添加它并绝对定位。

希望这有用。

Answer 3

如果你不知道最高元素或值的高度可能会有所不同 - 在纯css中你不能

但你可以：

在类img-responsive

上设置min-height

或

JS中的

（例如jQuery）：

1. find element（.find（））
2. 检查每个元素的高度并找到 最高结果（.height（））
3. 设置相同的高度