Question

I'm using Jquery slide panels for some images. The problem I'm having is when the slide panel shows it moves the image next to it down. I do not want this to happen. Is there a way to show the slider panel but not move the image next to it? There are questions similar to this but there are no answers to them on the site.

Here's the jsfiddle without the image files: https://jsfiddle.net/amyspod/q2obknwt/

Here's my code:

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

Answer 1

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

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

<强> Demo

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

Jquery slide panel moves adjacent picture down

1 个答案: