我想生成类似 apple.com 主页底部的 4 个方框的内容,但我希望它们是可变高度。
我能想到的最简单的技术是拥有两个 div。第一个包含其背景图像中除底部“cap”之外的所有内容,第二个 div 带有底部 cap,如下所示:
<div class="top-and-middle">
</div>
<div class="bottom">
</div>
/-----------------\ ^
| | |
| | |
| top-and-middle | | <this height can stretch
| | |
| | v
-------------------
| bottom |
\-----------------/
但这在我看来不是那么优雅..有更好的方法吗?也许只有一个div?最好只使用 CSS,但也可能使用 PHP 或 Jquery。
最佳答案
如今常用的技术是嵌套 div,而不是分离。每个都有自己的背景图像,一个顶部对齐,一个底部对齐,内部(正面)背景不重复,另一个(背面)背景高度足以适应任何合理的 div 高度。
<div class="box"><div class="wrap">
content
</div></div>
.box { background: url(/img/box-top-and-middle.png) top left no-repeat; }
.box .wrap { background: url(/img/box-bottom.png) bottom left no-repeat; }
这样做的好处是您可以更轻松地在内容下方设置边缘背景。
这被推广为‘sliding doors ’ 用于水平情况(尽管该技术在那篇文章之前肯定已经在使用)。各种其他组合,例如三个嵌套的 div 具有重复的主背景和单独的侧面图像,在病态的情况下,所有侧面都有 9 深的 div 嵌套(在实践中你永远不需要这个)。
好消息是,在 CSS3 中,您可以在单个元素上拥有多个背景图像,无需任何额外的包装 div:
.box {
background:
url(/img/box-top-and-middle.png) top left no-repeat,
url(/img/box-bottom.png) bottom left no-repeat;
}
这是漂亮的 Backgrounds and Borders 的一部分模块。不幸的是,在即将推出的第 9 版之前,IE 不支持它,因此如果您不介意它在当前 IE 版本和其他旧版浏览器中看起来不正常,您只能使用它。
关于jquery - 具有自定义背景图像的可变高度 div - 最好的技术是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3672370/