创建垂直扩展的盒子很容易，只需在您的 div CSS 中声明宽度，但不要声明高度。 div 将根据其内部内容扩展到所需的尺寸。 如果您想为这些带图片的盒子应用样式，它会变得更复杂一些。 如果您只想在盒子的顶部使用图片，您可以将背景图片应用于 div 并将其位置设置为左上、右上或居中，如下所示
.expandable_box {
width: 210px;
background-image ("IMAGE_URL");
background-position: top center;
background-repeat: no-repeat;
}这很有效，但如果也想要在底部有一个图片呢？ 如果您不需要盒子可扩展，您可以只使用一张大的背景图片，其大小正好是您需要的尺寸。 如果您需要它可扩展，就会变得更加复杂。 这是一项解决方案。
[下载示例]
包含 Photoshop 文件。
IE7 在底部显示额外的背景
嘿，发生了什么事。 我想知道这是否可以与图片内部的文本以外的内容一起使用？ 我计划在侧边栏中使用类似的东西作为内容框。 如果不行，该如何实现？ 此外，是否可以使此类内容框下方元素在内容框扩展到更靠近下方元素时向下移动更多？
谢谢
嘿，这对多个浏览器有效吗？
您好，我在 IE6、IE 7、Firefox 和 Safari 中进行了测试。
仅 IE6 中存在问题，IE7 会重复底部的图片。
好主意，很简单，所以如果有人能解决 IE6 的问题就太好了！
有没有办法实现这个，让盒子周围有透明背景？
我尝试过使用带圆角的盒子和透明 PNG 来实现，但失败了。 实际上，从我的屏幕上看到的情况来看，我已经非常接近了，我可以尝到成功的滋味。 所有的东西都在正确的位置，但中间图片和底部图片之间有一个 10 像素的间隙。 哎，就是你可以看到背景的角从底部图片的角后面透出来，这有点糟糕。
嘿，这个网站的导航（在顶部，标题的右侧）是如何制作的，没有使用 Flash？ 太棒了，底部也是。