更改一個圖像的頂部邊距會移動同一個容器內的所有圖像

我有幾個鏈接/圖像並排坐在一個容器中。容器的溢出屬性設置爲overflow: hidden，使用margin-top: -50px;將圖像「凹陷」到容器中。更改一個圖像的頂部邊距會移動同一個容器內的所有圖像

當用戶將鼠標懸停在鏈接上時，我希望圖像從容器中滑出，當用戶將鼠標懸停時，圖像會跳回。

Here is a demo of what I have currently.

這裏是我的CSS（我會後這一切萬一有問題，別的地方導致此）

html, body { 
    width:100%; 
    height: 100%; 
    margin:0; 
    padding:0; 
} 
#w { 
    display:table; 
    width: 100%; 
    height: 100%; 
} 
#iw { 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
    width: 100%; 
} 
#iiw { 
    border-top: 1px solid #000; 
    height: 125px; 
    overflow: hidden; 
} 
#iiw a { 
    margin-left: 8px; 
    margin-right: 8px; 
} 
#iiw a img { 
    margin-top: -50px; 
    height: 100px; 
    -moz-box-shadow:0 0.8em 1em #444; 
    -webkit-box-shadow:0 0.8em 1em #444; 
    -o-box-shadow:0 0.8em 1em #444; 
    box-shadow:0 0.8em 1em #444; 
    -moz-border-radius:0 0 10px 20px; 
    -webkit-border-radius:0 0 10px 20px; 
    -o-border-radius:0 0 10px 20px; 
    border-radius: 0 0 10px 20px; 

}

和HTML HTML標記是

<div id="w"> 
    <div id="iw"> 
     <div id="iiw"> 
      <a href="#"> 
       <img src="http://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png" /> 
      </a> 
      <a href="#"> 
       <img src="http://programmers.stackexchange.com/content/programmers/img/apple-touch-icon.png" /> 
      </a> 
     </div> 
    </div> 
</div>

我現在使用JQuery來執行懸停事件（爲了方便使用），但是最終產品將沒有JQuery（所以不要對jQuery代碼）

編輯我知道我離開的代碼了..哎呀發表評論。很簡單的東西。只是用它來交換margin-top財產

$("a").hover(function() { 
    $(this).children().css("margin-top", "-2px"); 
}, function() { 
    $(this).children().css("margin-top", "-50px"); 
});

來源

2011-09-20 rlemon

#iiw a { 
    display: block; 
    float: left; 
}

他們a標籤必須是塊級。

來源

2011-09-20 19:32:21

如何保持該中心對齊？看起來我添加了FAR太多的CSS來支持這個中心對齊*假設我必須添加一個更公平的位來支持左邊的浮點數* – rlemon

您將#iw設置爲具有'text-align：center;'和#iiw到'display：inline-block;'或給#iiw固定寬度和'margin：0 auto;' –

這是一個jfiddle。我也重寫了一些HTML。 http://jsfiddle.net/zjWaz/20/ –

看起來，共享同一行的元素將自己與該行中的最低元素對齊。如果將圖像的上邊距設置得比其他圖像的上邊距低，則其他圖像將下降，以使其底邊與其對齊。

要避免此行爲，請嘗試將vertical-align:top;添加到#iiw img塊中。我已將更改應用於您的示例here。

來源

2011-09-20 19:47:23 Kevin

更改一個圖像的頂部邊距會移動同一個容器內的所有圖像

回答

相關問題