製作超級鏈接響應

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

什麼想法？感謝

如果你不知道最高的元素或值的高度可能會有所不同

來源

2016-05-11 Fuxi

你應該給高度 – DK3

不能按預期工作..身高：自動不會工作，固定身高.. – Fuxi

- 純CSS你不能

，但你可以：

一套最小高度階級IMG響應

或

在JS（jQuery的例如）：

尋找元素（.find（））的每一個元素的
檢查高度，並找到最高成績（.height（））
設置相同HIGHT

來源

2016-05-11 13:03:20

這是我現在做的方式，因爲我需要一個快速解決方案.. – Fuxi

我想你'那就說。我有想法，如果你的元素只在一行中，我可以設置高度：每個子元素的100％，那麼每個孩子將是父母的高度。也許這有助於 –

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

來源

2016-05-11 13:17:26 Pugazh

這是一個flexbox演示http://codepen.io/maio/pen/MyxOdP – maioman

這可能是一種廉價的解決辦法，但它的工作原理：

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裏面添加這個和定位它絕對。

希望這是有幫助的。

來源

2016-05-11 13:18:18 Bassie

製作超級鏈接響應

回答

相關問題