作者mickeyboy (mickey)
看板Web_Design
標題[問題] 關於DIV換行的問題
時間Thu Aug 14 16:40:14 2014
不知道這個問題是否PO在這版
小弟最近在練習 jQuery Progress Bar
卻卡在DIV 斷行的問題上，是希望可以每三個BAR之後斷行
想做到的效果是
A:(純文字)
A1 A2 A3 (Bar)
B:(純文字)
B1 B2 B3 (Bar)
使用了float:left 之後卻變成了
A:(純文字)
A1 A2 A3 (Bar)B:(純文字) B1 B2 B3 (Bar)
縮圖如下: 上面黑框的是希望能達到的效果 (只是文字改成Bar圖)
下面的部分是嘗試的結果
http://ppt.cc/xzDM
最後附上小弟的程式碼
---------------------------------------
#topLoader{ float:left}
#topLoader2{ float:left}
#topLoader3{ float:left}
#B ul li {display:inline;}
--------------------------------------------
<div id="B">
<b> <?="完成率</br>"?> </b>
<ul>
<li> <div id="topLoader"><?="A:"?>
</div></li>
<li> <div id="topLoader2"><?="B:"?>
</div></li>
<li><div id="topLoader3"><?="C:"?>
</div></li>
</ul>
</div>
<div id="B">
<b>橫向水平呈現</b>
<ul>
<li>這裡是項目一</li>
<li>這裡是項目二</li>
<li>這裡是項目三</li>
</ul>
</div>
小弟對於切板方面真的不太熟悉，嘗試了很久還是卡在這問題上
所以想請教一下 指點迷津 謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 203.72.251.242
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1408005618.A.44B.html
1F：推 hit1205: 試試看在#B加上clear: both，或者用 display: inline-blo 08/14 16:47
2F：→ hit1205: ck在那三個區塊上 @@？ 08/14 16:47
3F：推 onininon: clear:both 08/14 18:22
4F：推 Letter1530: 你的兩個div都套用了B 這樣兩個都display=inline是這 08/15 02:35
5F：→ Letter1530: 個問題吧,你應該重設第二個div這樣就會換行了,可是考 08/15 02:36
6F：→ Letter1530: 慮到你把float設定為left所以也可能不會換行,這點我 08/15 02:37
7F：→ Letter1530: 不確定,我得試試看才知道結果 08/15 02:37
感謝各位前輩的指點，後來嘗試在#B上加入 clear:both就OK了 感謝...
※ 編輯: mickeyboy (203.72.251.242), 08/15/2014 09:16:28