作者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/cn.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