html - float 图像的CSS对齐

Question

这是问题的一个例子http://jsfiddle.net/nggrj1zt/4/ . 图片和标题是随机生成的，所以不能单独应用样式

这是html

<div id="wrapper">
   <div class="specialsticky">
      <img src="img1" alt="first image">
      <div class="mast-screen" style="opacity: 0.5;"></div>
      <div class="mast-screen1">
         <h1 class="mast-header"><a href="#">This the title </a></h1>
      </div>
   </div>
   <div style="clear:both"></div>


   <div class="specialsticky">
      <img src="img2" alt="second image"> 
      <div class="mast-screen" style="opacity: 0.5;"></div>
      <div class="mast-screen1">
        <h1 class="mast-header"><a href="#">This the title </a></h1>
      </div>
   </div>
   <div style="clear:both"></div>

   <div class="specialsticky">
      <img src="img3" alt="third image">
      <div class="mast-screen" style="opacity: 0.5;"></div>
      <div class="mast-screen1">
      <h1 class="mast-header"><a href="#">This the title </a></h1>
      </div>
    </div>
    <div style="clear:both"></div>
</div>

图片已对齐，但字幕和报头需要与其各自的图片对齐。当我尝试使用相对定位时，图像的对齐方式被打乱了。

Answer 1

将 position:relative 应用于 .specialsticky。当前 .mast-screen 和 .mast-screen1 相对于视口(viewport)定位。

Have an example!

CSS

.specialsticky {
    position: relative;
}

Here is a simplified example具有百分比高度和过渡悬停状态。