使用邊框圖像自動展開DIV

我有一個DIV，其邊框由圖像組成。我試圖做的是隻有當內容不適合內容區域時，纔會自動展開DIV（僅限高度）。否則，它應該只使用最小高度。這裏是我的標記：使用邊框圖像自動展開DIV

XHTML：

<div id="alerts"> 
    <div id="alerts-top"></div> 
    <div id="alerts-left"></div> 

    <div id="alerts-content"> 
     <div id="alerts-header"> 
      <p>Alerts</p> 
     </div> 

     <div id="alerts-main"> 
      <!-- content in here --> 
     </div> 
    </div> 

    <div id="alerts-right"></div> 
    <div id="alerts-bottom"></div> 
</div>

CSS：

#alerts { float: left; width: 267px; height: 200px; } 

#alerts #alerts-top { float: left; background: url(../images/alerts-top.png) no-repeat; height: 12px; min-width: 257px; } 
#alerts #alerts-left { float: left; background: url(../images/alerts-left.png) repeat-y; height: 100%; width: 12px; } 

#alerts #alerts-content { float: left; min-width: 239px; height: 206px; min-height: 206px; } 
#alerts #alerts-content #alerts-header { background: url(../images/alerts-bell.png) no-repeat; height: 20px; width: auto; padding: 10px; } 
#alerts #alerts-content #alerts-main { background-color: #FFFFFF; height: auto; } 

#alerts #alerts-right { float: left; background: url(../images/alerts-right.png) repeat-y; height: 100%; width: 12px; } 
#alerts #alerts-bottom { float: left; background: url(../images/alerts-bottom.png) no-repeat; height: 11px; width: 258px; }

這不是爲我工作 - 有下邊框和左，右邊界之間的差距。內容區域是#alerts-main。

來源

2012-03-15 GSTAR

什麼是你的圖片的完整網址？ – Alex 2012-03-15 09:53:37

對不起，我目前正在本地服務器上開發。 – GSTAR 2012-03-15 10:00:57

'alerts'div的高度是200px，'alerts-content'是206px，因爲左側和右側都是100％，它會根據父母的身高進行呈現，這會導致您的差距。 – 2012-03-15 10:06:59

嘗試此#alerts-bottom：

#alerts #alerts-bottom { 
    float: left; 
    background: url(../images/alerts-bottom.png) no-repeat; 
    height: 11px; 
    width: 258px; 
    margin-top: -9px; 
}

隨着margin-top屬性，你控制div將如何顯示負值（在這種情況下，你會迫使#alerts-bottomdiv上述默認的顯示渲染9px ）。

希望它有幫助。

來源

2012-09-18 08:24:28 codenighter

經過「五分鐘」的考慮，我寫了這段代碼，它會做你想做的。只需更改樣式即可將圖像添加爲背景。首先，CSS：

#wrapper { position: relative; width: 500px; min-height: 350px; } 
#alerts { position: relative; height: 50px; background-color: red; width: 90%; text-align: center; margin: auto; margin-top: 10px; margin-bottom: 10px; } 
#top-margin { position: absolute; height: 10px; top: 0; background-color: gray; width: 100%; } 
#right-margin { position: absolute; width: 10px; right: 0; background-color: gray; height: 100%; } 
#bottom-margin { position: absolute; height: 10px; bottom: 0; background-color: gray; width: 100%; } 
#left-margin { position: absolute; width: 10px; left: 0; background-color: gray; height: 100%; } 
#content { text-align: justify; padding: 65px 20px 20px 20px; }

和HTML：

<div id="wrapper"> 
    <div id="top-margin"> 
     <div id="alerts">Alerts alerts alerts</div> 
    </div> 
    <div id="right-margin"></div> 
    <div id="bottom-margin"></div> 
    <div id="left-margin"></div> 

    <div id="content">Lorem ipsum dolor sit amet etc...</div> 
</div>

的#wrapper的高度將擴大，因爲更多的文本添加。對不起，我已經更改了ID的名稱並證明了正確的文字。但那可以很容易地得到補救。

來源

2012-09-18 08:55:28 codenighter

使用邊框圖像自動展開DIV

回答

相關問題