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相对于视口正在定位。

Have an example!

CSS

.specialsticky {
    position: relative;
}

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

css对齐浮动图像

1 个答案: