jquery滑动面板下移相邻图片答案

【问题标题】：Jquery slide panel moves adjacent picture downjquery滑动面板下移相邻图片
【发布时间】：2017-01-08 01:18:21
【问题描述】：

我正在为一些图像使用 Jquery 滑动面板。我遇到的问题是当滑动面板显示它时，它会将旁边的图像向下移动。我不希望这种情况发生。有没有办法显示滑块面板但不移动旁边的图像？有类似的问题，但网站上没有答案。

这是没有图像文件的 jsfiddle： https://jsfiddle.net/amyspod/q2obknwt/

这是我的代码：

<div class="images">

          <div class="image1">
            <img class="myImg" id="heroimage" src="heros website.jpg" alt="www.heros.com" width="300" height="200">
            <div class="panel" id="hero">PSD to responsive website</div>
          </div>
          <div class="image2">
            <img class="myImg" id="oakimage" src="oak website.jpg" alt="www.oak.com" width="300" height="200">
            <div class="panel" id="oak">PSD to responsive website 2</div>
          </div>
        </div>


.myImg {
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin-top: 40px;
  }

  /*slider panels*/
.image1, .image2{
  display:inline-block;
    margin-left: 10%;

}
.panel {
    padding: 10px;
    text-align: center;
    background-color: white;
    font-size: 20px;
    display: none;
}


$(document).ready(function(){

function slidepanel(x,y){
    $(x).mouseenter(function(){
        $(y).slideToggle("slow");
    });
     $(x).mouseleave(function(){
        $(y).slideToggle("slow");
    });
}

slidepanel("#oakimage", "#oak");
slidepanel("#heroimage", "#hero");
});

【问题讨论】：

标签： javascript jquery image slide

【解决方案1】：

内联（或内联块）元素与基线对齐。试试这个：

.image1,
.image2 {
    ...
    vertical-align: top;
}

Demo

另请注意，CSS 类在设计上旨在可重用。在这种情况下，我认为没有理由拥有其中两个，并且它们应该具有描述其用途或功能的语义值。

【讨论】：