css - 仅当包含内容时才使用相对高度设置 div 的背景样式

Question

我正在尝试通过使用顶部和底部图像来设置 div 的背景样式以产生投影效果，如下所示:

<div id='topline' style='background-image:url("topline.png"); background-repeat:no-repeat; height:10px'></div>
<div id='boxcontent' style='background-image:url("contentline.png"); background-repeat:repeat-y;'>
  [some content]
</div>
<div id='bottomline' style='background-image:url("bottomline.png"); background-repeat:no-repeat; height:10px'></div>

这对内容很好用，但是一旦没有内容，顶部和底部 div 当然仍然显示。关于如何改进这一点以使整个框不显示除非它包含内容的任何想法？

谢谢

Answer 1

假设页面上有多个“框”，您将需要更改您的id s 至 classes ... 作为 id s 必须在页面中是唯一的。

完成后，您可以使用 jQuery 做类似的事情

$('.boxcontent:empty').hide();

示例: http://jsfiddle.net/h5S9B/

对不起@hofnarwillie。忘了隐藏其他部分。修订:

if($('.boxcontent:empty')){
    $('.boxcontent:empty').hide(); 
    $('.boxcontent:empty').prev().hide();
    $('.boxcontent:empty').next().hide();    
}

示例 2: http://jsfiddle.net/h5S9B/1/

然后你可以把它变成一个 function重用:

var e = $('.boxcontent:empty'); 

function hideBoxes(e){
    if(e){
        e.hide();    
        e.prev().hide();
        e.next().hide();    
    }
}

hideBoxes(e);

示例 3: http://jsfiddle.net/h5S9B/2/