→ propc:我用這個方法弄好了 謝謝^^" 04/21 19:07
※ 引述《JYHuang (夏天到了，冷不起來了說)》之銘言：
: ※ 引述《propc (propc)》之銘言：
: : 規格：高約1cm、寬約1cm。
: : 附上圓形耳夾2個、銀鍊2條。
: → chph:就三個全形空白啊，哪會很難預期啊？二樓不要誤導 04/21 01:00
: OK~
: 那如果那天又出現個要四個中文字、五個中文字的情形呢？
: 又，如果是英文半形的話，你會知道什麼叫"無法預期"~
: 這時已經不是幾個半形空白可以決解的~~
: 我並不是在誤導，我是把其它的情況都考慮進去了
: --
: 推 pm2001:你又知道接下來會有四個中文字了嗎? 04/21 09:21
: 推 gpmm:所以又知道不會有嗎？ 04/21 09:23
有時候並不只是接下來會不會出現什麼的問題，
那是觀念。
三個全形空白解法可以解這邊，那麼如果要增加英文版網頁，可以解嗎？
如果改成規格 (1)：，三個全形空白可以解嗎？
那是否又要等到下次原 po 遇到了，上來問，再給他另一個的解法？
--
如果能接受 css ，有好幾種方式可以實做。
簡單的可以這樣：
<p class="spec">
規格：高約1cm、寬約1cm。<br />
附上圓形耳夾2個、銀鍊2條。
</p>
假定字型大小為 16px， p 可以套用以下樣式，
p.spec { margin-left: 48px; text-indent: -48px;}
但這樣的缺點是應對不同寬度要套用不同 class 做調整，
複雜一點可以這樣：
<div class="spec">
<span class="title">規格：</span>
<p class="content">高約1cm、寬約1cm。<br />附上圓形耳夾2個、銀鍊2條。</p>
</div>
css 如下：
div.spec { /* width: 200px; */ }
/* 如果可以的話，記得指定 div 寬度，使其必大於 title span 的寬度，
否則 float 會被擠壓換行 */
div.spec span.title { float: left; }
div.spec p.content { float: left; }
div:after { content: "."; display: block; font-size: 0em; height: 0;
clear: both; visibility: hidden; }
優點是可以全數套用，不必在意寬度，
缺點是在組件 float 的情形下，
有幾種英文字型會和中文字型的對齊產生不可預期的誤差，
修正方式一是替換字體樣式，
（許多其他的英文字體是可以對齊的）
div.spec { /* width: 200px; */ font-family: Tahoma; }
或同時替換字型大小、字體樣式、行高，
（部份無法完全對齊的字體，可以透過修改這三項來勉強對齊）
div.spec { /* width: 200px; */
font-size: 16px; line-height: 1.3em; font-family: Verdana; }
另一個比較不建議採用的方式是，乾脆在每一個 float 組件的內文都加上
，這樣便強制讓每段內文都有英文（空白）內置，大家一起沉淪…
但只要一個頁面中同時有 float 跟非 float 在一起時，
誤差還是會被發現的（汗）
--
我並不否認能解決問的方法就是好方法。 :)
但如果我在面對問題時，都只抱持著像是只想把考試 pass 過去這樣的心態，
只想求得解決現在問題的方法，那也許我始終都無法成長吧。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.135.19.91
※ 編輯: gpmm 來自: 220.135.19.91 (04/21 10:26)