如何让div落在前面的div旁边

Hello all I have two images that switch on hover. in the divs they are currently in the images overlap, both starting at the top of the div as opposed to beside it.example

大家好我有两张图片可以切换悬停。在div中,它们当前在图像中重叠,都从div的顶部开始而不是在它旁边。例如

<div class="storyboard">

<div class="storycard" >
    <img src="Images/Articles/Index/world%20cup2.jpg" class="primary">
    <img src="Images/Articles/Index/world%20cup.jpg" class="secondary">
</div>

<div class="storycard">
   <img src="Images/Articles/Index/ntci2.jpg" class="primary">
   <img src="Images/Articles/Index/ntci1.jpg" class="secondary">
</div>

and my css

和我的CSS

 .storyboard{
     width: 100%;
     padding: 30px;

 }

.storycard{
    position: relative;
    float: left;
 }

.storycard img{
    position: absolute;
     margin: 0 auto;

}

.storycard .secondary:hover {
  position: absolute;
  top: 0;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  -ms-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  display: block;
}

Due to the .storycard .secondry:hover as it is I cant make the .storycard img relative other wise I get this. Thanks.

由于.storycard .secondry:悬停,因为它是我不能使.storycard img相对其他明智我得到这个。谢谢。

1 个解决方案

#1

First of all enclose your all div elements in a #wrapper.
and set the display of #wrapper to display:inline-block;

首先将所有div元素包含在#wrapper中。并将#wrapper的显示设置为display:inline-block;

#wrapper{
 width: 100%;
 padding: 30px;
display:inline-block;
}

Then give different class to both div elements inside the #wrapper
See the Demo

然后给#wrapper中的两个div元素赋予不同的类。参见Demo

#1