我试图将底部阴影与顶部阴影对齐,但似乎无法消除。它唯一崩溃的时间是使用Developer Toolbars在css文件中将行高或字体大小进一步降低时,但是当然这也会影响其他所有内容。这是我的基本html结构:

<div class="banner-image">
  <div class="banner-image-wrapper">
    <div class="shadow-top"></div>
      <a class="header-image">
        <img />
      </a>
    <div class="shadow-bottom"></div>
  </div>
</div>


在标签上,如果我删除了font-size和line-height,一切都会很好地折叠起来,但是我似乎不能仅仅在标签上强行将其折叠。

我知道一旦解决,这将是一个荒谬的问题。

谢谢!

最佳答案

答案实际上很简单,您只需要使用一些巧妙的定位并利用父级的盒模型即可:

.banner-image{
    position:relative;
}

.shadow-bottom{
    position:absolute;
    height: x;
    bottom: -x;
}


这是您需要的公式:


取下阴影的高度(某些值x)
然后确保该元素的父元素的位置为“相对”(〜important〜)
使底部阴影的位置“绝对”
将其放在底部减去高度值(-x)


这是一个说明效果的jsFiddle:http://jsfiddle.net/k7CmJ/

10-05 20:58
查看更多