当相对定位一个元素时,就它的父级而言,它仍然处于没有相对声明的位置。这意味着父块不会扩展到对象已重新定位的位置。
在此示例中,大图片周围的浅蓝色/绿色背景和“Beach House”文本不会延伸到下面的栏(带有隐私和喜欢我们等)。这是因为条形图是使用相对定位的。有没有一种简单的方法可以扩展矩形以覆盖底栏?
当相对定位一个元素时,就它的父级而言,它仍然处于没有相对声明的位置。这意味着父块不会扩展到对象已重新定位的位置。
在此示例中,大图片周围的浅蓝色/绿色背景和“Beach House”文本不会延伸到下面的栏(带有隐私和喜欢我们等)。这是因为条形图是使用相对定位的。有没有一种简单的方法可以扩展矩形以覆盖底栏?
我假设由于您依赖 html5 标签,我可以忽略旧的 IE,所以我使用 css box-sizing 属性来简化它,代码并达到相同的效果。
即使您确实应该将它们更改回正常的十六进制值以获得 IE8 支持,我还是保留了 rgb 颜色。
为什么不使用组合float: left; margin: X;
而不是在position: relative; top: Xpx; left: Xpx;
此处查看示例http://jsfiddle.net/zpV3m/7/