Question

我想在apple.com主页底部生成类似4个方框的内容，除非我希望它们是可变高度。

我能想到的最简单的技术是拥有两个div。第一个包含除背景图像中底部'cap'以外的所有内容，第二个div包含底帽，如下所示：

<div class="top-and-middle">
</div>
<div class="bottom">
</div>

/-----------------\   ^
|                 |   |
|                 |   |
| top-and-middle  |   | <this height can stretch
|                 |   |
|                 |   v
-------------------
|      bottom     |
\-----------------/

但在我看来，这并不是那么优雅..有更好的方法吗？也许只有一个div？最好只使用CSS，但也可能是PHP或Jquery。

Answer 1

今天使用的常用技术是嵌套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版本和其他旧浏览器中看起来偏斜，你只能使用它。

可变高度div与自定义背景图像 - 什么是最好的技术？

1 个答案: