html - 如何让div落在前一个div旁边

Question

大家好，我有两张悬停图像。在 div 中，它们当前位于图像重叠中，两者都从 div 的顶部开始，而不是在其旁边。 example

<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>

和我的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;
}

由于 .storycard .secondry:hover 因为它是我无法使 .storycard img 相对于其他方式我得到 this .谢谢。

Answer 1

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

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

然后给 #wrapper 中的两个 div 元素赋予不同的 class
查看Demo