我试图将底部阴影与顶部阴影对齐,但似乎无法消除。它唯一崩溃的时间是使用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/