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：悬停，因为它是我无法使.storycard img相对其他明智我得到this。感谢。

Answer 1

首先将所有div元素括在#wrapper中并将display的{{1}}设置为#wrapper

display:inline-block;

然后为#wrapper{ width: 100%; padding: 30px; display:inline-block; }中的class个元素提供不同的div 请参阅Demo

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

1 个答案: