更改一个图像的顶部边距会移动同一个容器内的所有图像

我有几个链接/图像并排坐在一个容器中。容器的溢出属性设置为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

更改一个图像的顶部边距会移动同一个容器内的所有图像

回答

相关问题