Question

我总是在试图找出制作可扩展内容框的最佳方法时遇到问题。我曾经使用过桌子并将盒子分成几个部分（顶部，底部，左侧和右侧 - 然后是桌子单元格中的每个角落，内容都有一个可扩展的中间单元格）这在所有浏览器上都很完美，但它通常不赞成。

今天我有一张图片，我只需要垂直展开。但它有一个投影，前200个像素左右有一个渐变。这是我正在使用的图像的链接。

http://imageshack.us/photo/my-images/16/brandinfobox.png/

内容需要流动，div需要随着内容的增长而垂直扩展。我看了几个方法，但我们要么没有成功，要么他们没有在某些浏览器中工作。主要问题是下降和阴影以及顶部渐变。那些阻止我使用基本背景然后绝对定位一些div内部，因为当我绝对定位外边缘时背景破坏了投影。

有什么建议吗？如果你了解css的方式，那肯定很简单

Answer 1

对于这种类型的图像，你可以这样做吗？渐变

http://jsfiddle.net/wh6r4/

编辑：添加了CSS代码

.content{
    background: url(http://i.imgur.com/5hN1S.png) repeat-y top left;
    width:647px;
    min-height:300px;
    position:relative;
    margin:50px;
}
.y-repeat{
    position:absolute;
    left:2px;
    right:7px;
    top:0;
    bottom:0;
    background: url(http://i.imgur.com/bJmR4.png) repeat-x top left;
}
.top, .bottom{
    background: url(http://img16.imageshack.us/img16/3301/brandinfobox.png) no-repeat 0 0;
    height:20px;
    width:100%;
    position:absolute;
    left:0;
}
.top{
  top:-20px;
}
.bottom{
  background-position:left bottom;
  bottom:-20px;
}

Answer 2

如果那个盒子的最小高度比这里有一些ex。该怎么做：

<div id="box-top"> // CSS bg image = 600*8px with rounded corners 
<div id="box-middle"> // CSS bg image = 5*80px vertical tiny gradient line ; min-height!  
<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners

或者更好：

您可以通过设置position:absolute，width 100%和height:100%来扩展中间DIV内的渐变图像！

<div id="box-top"> // CSS bg image = 600*8px with rounded corners 

<div id="box-middle">
 <img class="box_mid_img" src="vertical_gradient_image.png"> // CSS: .box_mid_img width:100%; height:100%; position:absolute
</div>

<div id="box-bottom"> // CSS bg image = 600*8px with rounded corners

<小时/> 另一个技巧是简单地使用CSS3，您将获得对IE渐变的支持，但不支持阴影和角落（边框）半径。

http://jsbin.com/uberub/2/edit#javascript,html,live

Answer 3

我会在CSS3中添加一个线性渐变。

对于带阴影的周围圆形框，无论我是使用100％CSS3还是两张背景图片，额外的div都取决于我客户的要求。

Answer 4

我会将图像分成三个水平条带。一个用于顶部，包括圆角，一个用于底部，包括角和阴影，以及一个非常薄的中间条带。

然后使用这样的标记：

<div style='background-image: url("middle.png"); width: 400px;'>
    <img src='top.png'>
    Expanding content in the middle
    ...
    Can be as big as you like
    <img src='bottom.png'>
</div>

垂直扩展内容框

4 个答案:

http://jsfiddle.net/wh6r4/