kevin_whui_liu
2009-11-27 10:28
浏览 332

多个float的div 之间,想强制换行怎么办?

多个float的div 之间,想强制换行怎么办?

li {float:left;}
  • 测试1
  • 测试2
  • 测试3
  • 测试4,这个li结束时我想换行
  • 测试5
  • 测试6,这个li结束我又不想换行
  • 测试7

换行与不换行我可以随时更改,想换就换,想不换就不换,
请高手我该怎么做?
注:不要告诉我设置width(因为宽度要根据内容而定,li里可能是数据库取出的图片,无法确定宽度)
[b]问题补充:[/b]
具体怎么做?该怎么定义样式?
[b]问题补充:[/b]
to lovewhzlq :不浮动的话就都换行了,
在这里多个div的布局应该跟多个li的布局差不多吧!

[b]问题补充:[/b]
抛出异常的爱 为正解!
float:none;这个属性之前我很少用~
但是我想另外问一下,float:none与clear:both的区别是不是这样:
float:none,它还是使得这几个li之间还是处于同一层,而clear:both就是使该li没有float出来~~
[b]问题补充:[/b]
to lovewhzlq :
您的方法我测试过,还是不能实现我的效果,在这里应该是不能用clear:both吧~~,用了就又乱了,您看看:

li {float:left;} .clear{clear:both;float:none;}

[b]问题补充:[/b]
to lovewhzlq :
/**************************
clear:both;
CSS手册上这样解释的:该属性的值指出了不允许有浮动对象的边。
这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除clear:both;
***************************/
所以我们是不是应该在最后加一个

,不知道大家会不会这样做?
[b]问题补充:[/b]
就是使得ul里面包含了全部的li,而不置于使得float里的内容脱离ul
[b]问题补充:[/b]
to lovewhzlq :
如果您用firebug hacker的时候,你会发现用了这个与没有用这个的区别:ul的高度会不一样。
我曾经写过一个js向上滚动文字的效果时,发现如果不加这个li在ff,chorm,ie8可以滚动,而在 IE 5 6 7里就不行~~加了这个才行
[b]问题补充:[/b]
哦不是这个:

是这样,刚才写错了:
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

10条回答 默认 最新

  • m_m1m2m3m4m5 2009-11-27 10:36
    已采纳

    <br> li {float:left;} <br> li.tt{float:none;}<br>

    <!-- //-->
    • 测试1
    • 测试2
    • 测试3
    • 测试4,这个li结束时我想换行
    • 测试5
    • 测试6,这个li结束我又不想换行
    • 测试7
    打赏 评论
  • CaiHuajiang 2009-11-27 10:31

    给li定义两个样式,或者用style覆盖掉要换行的样式

    打赏 评论
  • wanghaolovezlq 2009-11-27 10:34

    多个float的div 之间?

    你那是多个float的li之间吧,不细心

    不浮动不就是换行了嘛

    打赏 评论
  • wanghaolovezlq 2009-11-27 10:42

    那你可以增加一个样式,清除浮动的

    li {float:left;} .clear{clear:both;float:none;}
    • 测试1
    • 测试2
    • 测试3
    • 测试4,这个li结束时我想换行
    • 测试5
    • 测试6,这个li结束我又不想换行
    • 测试7
    打赏 评论
  • wanghaolovezlq 2009-11-27 10:59

    clear:both;
    CSS手册上这样解释的:该属性的值指出了不允许有浮动对象的边。
    这个属性是用来控制float属性在文档流的物理位置的。

    当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除clear:both;

    打赏 评论
  • wanghaolovezlq 2009-11-27 11:13

    没乱吧,只不过用了clear:both;样式的那个li就会成为单独的一行,
    因为它会把左右的浮动都清除,自然就成单独一行了

    如果你不是要这种效果的话,那就不要用这个样式,

    打赏 评论
  • wanghaolovezlq 2009-11-27 11:19

    最后加那个的意思在?
    从来没见过这么做的,你想要的效果是?

    打赏 评论
  • wanghaolovezlq 2009-11-27 11:28

    哪需要用到这种hacker方式

    布局样式设计好都不会让你考虑到这些问题

    打赏 评论
  • xxxxxxxxxxxxxxxxx 2009-11-27 11:29

    [quote]不要告诉我设置width(因为宽度要根据内容而定,li里可能是数据库取出的图片,无法确定宽度)[/quote]

    设置了宽度就能满足你的要求,只是宽度要设置为
    [code="css"]{
    overflow:hidden;
    width:24.5%;
    }[/code] 这样的样子。

    打赏 评论
  • wanghaolovezlq 2009-11-27 11:58

    如果加上js去做一些特殊效果的话,那就的确会破坏部分布局,嗯,

    打赏 评论

相关推荐 更多相似问题