如何使跨越捕捉div的底部（多個div）

我有代碼，我需要創建三個圖像在對方下，文本跨度。問題是，我無法爲每個圖像設置相對於每個圖像的「頂部」值（例如，所有圖像都是150像素高，因此每個範圍「頂部」值爲130像素，而不是130,290等等...）我的HTML代碼：如何使跨越捕捉div的底部（多個div）

<div class="obrazekvmenu" style="float:left; margin-bottom:10px; left:-2px;"> 
<a href="#"> 
<img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;"/></a> 
<span class="photoh20"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;"><a class="photoa" href="#" rel="bookmark">MSI</a></h2></span> 
</div> 
<div class="obrazekvmenu" style="float:left; margin-bottom:10px; left:-2px;"> 
<a href="#"> 
<img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;"/></a> 
<span class="photoh21"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;"><a class="photoa" href="#" rel="bookmark">MSI</a></h2></span> 
</div>

我的CSS：

.obrazekvmenu:hover > .photoh20{ 
    background: -webkit-linear-gradient(top,rgba(255,255,255,1),rgba(51,52,51,1)); 
} 
.obrazekvmenu:hover > .photoh21{ 
    background: -webkit-linear-gradient(top,rgba(255,255,255,1),rgba(51,52,51,1)); 
} 
span.photoh20{ 
text-shadow: 2px 2px black; 
} 
span.photoh21{ 
text-shadow: 2px 2px black; 
} 
.sidebarimage{ 
top:-3px; 
} 
span.photoh20 { 
    position: absolute; 
    left: 0; 
top:147px; 
background: -webkit-linear-gradient(top,rgba(255,255,255,0.7),rgba(51,52,51,.7)); 
    width: 103.338%; 
} 
.obrazekvmenu{ 
width:310px; 
height:185px; 
} 
span.photoh21 { 
    position: absolute; 
    left: 0; 
top:147px; 
background: -webkit-linear-gradient(top,rgba(255,255,255,0.7),rgba(51,52,51,.7)); 
    width: 103.338%; 
}

JS小提琴鏈接：https://jsfiddle.net/g1zn2nm6/3/

來源

2017-02-28 Koty97

試試這個

<div class="obrazekvmenu" style="float:left; margin-bottom:50px; left:-2px;"> 
<a href="#"> 
<img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;" /> 
</a> 
<span class="photoh20"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;"> 
<a class="photoa" href="#" rel="bookmark">MSI</a></h2> 
</span> 
</div> 
<div class="obrazekvmenu" style="float:left; margin-bottom:10px; left:-2px;"> 
<a href="#"> 
<img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;" /> 
</a> 
<span class="photoh21"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;"> 
<a class="photoa" href="#" rel="bookmark">MSI</a></h2> 
</span> 
</div>

，並在你的CSS

.obrazekvmenu:hover > .photoh20 { 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(51, 52, 51, 1)); 
} 
.obrazekvmenu{display:block} 
.obrazekvmenu:hover > .photoh21 { 
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(51, 52, 51, 1)); 
} 

span.photoh20 { 
text-shadow: 2px 2px black; 
} 

span.photoh21 { 
text-shadow: 2px 2px black; 
} 

.sidebarimage { 
    top: -3px; 
    } 

    span.photoh20 { 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(51, 52, 51, .7)); 
    width: 103.338%; 
    } 

.obrazekvmenu { 
    width: 310px; 
    height: 185px; 
    } 

    span.photoh21 { 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(51, 52, 51, .7)); 
    width: 103.338%; 
    }

我希望這將幫助你解決你的問題

來源

2017-02-28 19:45:41

我的jsfiddle想這一點，它不工作，我希望它看起來像這樣（HTTPS ：//jsfiddle.net/g1zn2nm6/5/），但不會增加photoh20和photoh21 – Koty97

中的頂級價值，而不是最高價值使用'margin-top：-50px;' 。 –

如何使跨越捕捉div的底部（多個div）

回答

相關問題