我有一個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
。
什麼是你的圖片的完整網址? – 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