Question

嘿大家第一次发帖很抱歉，如果我的格式有点偏。我花了一段时间，但我终于找到了如何导致图像翻转导致我的文章弹出图片。但是我现在唯一拥有的当我滚动图像导致文章出现在它下面时，它不会影响它下方图像的位置。

HTML

 <div class="postBlock">
  <img src="#.jpg" />
    <article>
      <h2>Check the mountains, nice.</h2>   
         <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text      Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Tex
          </p>
     </article>
</div>
<div class="postBlock">
  <img src="#.jpg" />
    <article>
      <h2>Check the mountains, nice.</h2>   
         <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text      Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Tex
          </p>
     </article>
</div>

CSS

.postBlock {
position:relative;
width:250px;
height:250px;
margin:10px;
float:left;
font-family:"Verdana, Geneva, sans-serif";
border:5px solid #353432;
}
.postBlock img {
position:relative;
height:250px;
width:250px;
}
.postBlock article {
display:none;
}
.postBlock img:hover ~ article {
position:relative;
display:block;
}
.postBlock h2 {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

所以回顾一下。当我将鼠标悬停在图像框上时，我想要一篇文章展开并将其下方的图像框向下移动，以便您可以阅读该文章。希望CSS，但如果需要Javascript，请解释一下:)谢谢。

这是一个小提琴。Fiddle！

Answer 1

只需从.postBlock div中移除身高值，就可以了：http://jsfiddle.net/7P5RP/2/

或者如果您愿意，可以使用min-height代替height。重要的是允许div垂直扩展。

这是一个更好的解决方案，我已将边框移动到图像，而不是容器，我认为这正是您所需要的：http://jsfiddle.net/7P5RP/3/

CSS：当内容扩展时我需要下面的内容

1 个答案: