|
這時(shí)，我們的選項(xiàng)卡寬度就不能是一個(gè)固定值，而要使用百分比了。對(duì)于2、4、5這樣能被100%整除的數(shù)，這個(gè)取值很容易，每個(gè)選項(xiàng)卡的寬度就是50%、25%、20%；對(duì)于3、6、7這樣不能整除的數(shù)，應(yīng)該怎么辦呢？哈，幸好我們還有一點(diǎn)數(shù)學(xué)基礎(chǔ),以一組3個(gè)選項(xiàng)卡為例：33.3% + 33.3 + 33.4%這樣的分法也不錯(cuò)，加起來能夠湊到100%，選項(xiàng)卡之間0.1%的寬度差，應(yīng)該是0.3-0.4像素，可以忽略。好，讓我們看看這樣的分法結(jié)果如何？
FireFox、ie下，如上圖，非常和諧。
Safari和Chrome下：
哈哈，好像就不那么完美了。在選項(xiàng)卡數(shù)量為3、5個(gè)時(shí)，我們發(fā)現(xiàn)選項(xiàng)卡比下面的內(nèi)容寬度短了兩三個(gè)像素，這——是為什么呢~~？–小沈陽問。
讓我們先來看看這些選項(xiàng)卡的html代碼結(jié)構(gòu)：
<div>
<ul>
<li><a href="#">今日要聞</a></li>
<li><a href="#">直播大廳</a></li>
<li><a href="#">今日要聞</a></li>
</ul>
<div></div>
</div>其中，包圍在最外面的div.w320，規(guī)定的是這個(gè)模塊的寬度，這里模仿iPhone豎屏?xí)r的寬度320px—橫屏?xí)r就是w480。這里我們給頁面兩邊留的空隙是4px，有效內(nèi)容寬度是312px。
.w320{width:312px; padding:0 4px; margin:5px 0;}
出處：騰訊WSD
責(zé)任編輯：bluehearts
上一頁 一個(gè)選項(xiàng)卡寬度的哥德巴赫猜想 [1] 下一頁 一個(gè)選項(xiàng)卡寬度的哥德巴赫猜想 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 2 頁 一個(gè)選項(xiàng)卡寬度的哥德巴赫猜想 [2]
