的樣式與相對高度一個div的背景下，只有當它包含內容

我試圖用頂部和底部的圖像，像這樣一個陰影效果風格DIV的背景：的樣式與相對高度一個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當然仍在顯示。有關如何改進這一點的任何想法，以便整個盒子不會顯示，除非它包含內容？

感謝

來源

2011-09-17 hofnarwillie

假設有不止一個「盒子」的頁面上，你將需要改變你的id s到classes ...作爲id的需要是唯一的頁。

已經這樣做了，你可以做這樣的事情用jQuery

~~$（ 'boxcontent：空。'）隱藏（）;~~

實施例： 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/

來源

2011-09-17 12:17:29

這似乎是針對這種特定場景的最佳解決方案，但是您能否告訴我這是如何防止顯示頂部和底部線？是否應該不再有2個.hide（）函數？ – hofnarwillie

看到我上面的編輯@hofnarwillie –

謝謝@Jason，非常有幫助。 – hofnarwillie

檢查與任何服務器端語言，你正在使用，如果沒有內容，應用類，將隱藏的div服務器端的內容。例如，您可以分配類「隱藏」，然後在你的CSS定義「隱藏」爲：

.hide { display:none }

來源

2011-09-17 12:01:31 SBerg413

你只需要一個服務器端語言。

在PHP也就是說，用戶可以嘗試這樣的事：

<?php 
$some_content = "Your Content"; 

if (!empty($some_content)): ?> 
    <div id='topline'></div> 
<?php endif; ?> 

<div id='boxcontent'> 
    <?php echo $some_content; ?> 
</div> 

<?php if (!empty($some_content)): ?> 
<div id='bottomline'></div> 
<?php endif; ?>

而且 - 請 - 不使用內聯CSS ......尤其是當你在你的頭有一個樣式表，更好的是，讓你的習慣編寫單獨的CSS文件。

的style.css

#topline, #bottomline { 
    height:10px; 
    background-repeat:no-repeat 
} 
#topline { background-image:url("topline.png") } 
#bottomline { background-image:url("bottomline.png") } 

#boxcontent { 
    background-image:url("contentline.png"); 
    background-repeat:repeat-y 
}

來源

2011-09-17 12:08:49 Simone

謝謝。我只是爲了節省在論壇中輸入更多信息而插入內聯樣式，但是很好說。關於您的解決方案，不幸的是服務器端代碼不是這種特殊情況下的選項。不管怎麼說，還是要謝謝你。 – hofnarwillie

顯然，用JavaScript等客戶端語言也可以做到同樣的事情，但可能這種情況會更復雜一些。 – Simone

你不」不需要任何服務器端是問題，最好也是最簡單的方法就是檢查boxcontent的高度。如果height == 0，那麼沒有內容，並且您設置了不同的類，其頂線&底線沒有陰影。

來源

2011-09-17 12:18:56 StackUnderflow

回答

相關問題