首頁 HTML&CSS CSS CSS Layout - Dynamic width DIV
CSS Layout - Dynamic width DIV 列印 填寫電子郵件
(0 位用戶參與評分, 當前平均得到 0 顆星星)
HTML&CSS / CSS / Eddy Chang / 週一, 28 十一月 2011 18:18 

<div style="height:42px; width:100%; margin:0; padding:0">
 <div style="float:left;margin:0; padding:0;"><img src="/images/content_title_01.jpg" width="23" height="42" alt=""></div>
<div style="float:left;margin:0 ; padding:7px 0 0 0;height:42px; width:765px; background: url('/images/content_title_02.jpg') repeat-x; "><?php echo $this->escape($this->item->title); ?>
</div>
 <div style="float:left;margin:0; padding:0;"><img src="/images/content_title_04.jpg" width="22" height="42" alt=""></div>
</div>

需改為以下，注意float變成一左一右，然後主內容在中間：

<div style="height:42px; width:100%;">
 <div style="float:left;width:23px"><img src="/images/content_title_01.jpg" width="23" height="42" alt=""></div>
 <div style="float:right;width:22px"><img src="/images/content_title_04.jpg" width="22" height="42" alt=""></div>
 <div style="display:block; margin-left:auto; margin-right: auto;padding:7px 0 0 0;height:42px; background: url('/images/content_title_02.jpg') repeat-x; "><?php echo $this->escape($this->item->title); ?></div>
 
</div>

中間的文字區域就可以動態延長寬度。用於中間文字區域的要有背景時。

測試過IE 7/8/9, Firefox, Chrome都ok。這個解法的來源是：

http://stackoverflow.com/questions/1359025/css-layout-dynamic-width-div

評論：

新增回應


驗證碼
更新

Download SocComments

關於我something about me

eddy

Eddy Chang

Joomla!台灣站長、資擘（股）軟體工程師

最新留言Latest Comment