多个float的div 之间，想强制换行怎么办？

0 0

多个float的div 之间，想强制换行怎么办？10

多个float的div 之间，想强制换行怎么办？

如
<STYLE TYPE="text/css">
li {float:left;}
</STYLE>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4，这个li结束时我想换行</li>
<li>测试5</li>
<li>测试6，这个li结束我又不想换行</li>
<li>测试7</li>
</ul>

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

问题补充：
抛出异常的爱为正解！
float：none;这个属性之前我很少用~
但是我想另外问一下，float:none与clear：both的区别是不是这样：
float：none，它还是使得这几个li之间还是处于同一层，而clear:both就是使该li没有float出来~~
问题补充：
to lovewhzlq :
您的方法我测试过，还是不能实现我的效果，在这里应该是不能用clear:both吧~~，用了就又乱了，您看看：
<STYLE TYPE="text/css">
li {float:left;}
.clear{clear:both;float:none;}
</STYLE>
<ul>

<li><img src="http:www.wecoo.com/images/index/top1.jpg" width="73" height="46" /></li>
<li><img src="http:www.wecoo.com/images/index/top2.jpg" width="86" height="46" /></li>
<li><img src="http:www.wecoo.com/images/index/top3.jpg" width="96" height="46" /></li>
<li><img src="http:www.wecoo.com/images/index/top4.jpg" width="126" height="46" /></li>
<li><img src="http:www.wecoo.com/images/index/top5.jpg" width="118" height="46" /></li>
<li class="clear"><img src="http:www.wecoo.com/images/index/top6.jpg" width="117" height="46" /></li>
<li><img src="http:www.wecoo.com/images/index/down1.jpg" width="126" height="44" /></li>
<li><img src="http:www.wecoo.com/images/index/down2.jpg" width="163" height="44" /></li>
<li><img src="http:www.wecoo.com/images/index/down3.jpg" width="156" height="44" /></li>
<li><img src="http:www.wecoo.com/images/index/down4.jpg" width="173" height="44" /></li>
</ul>
问题补充：
to lovewhzlq :
/**************************
clear:both;
CSS手册上这样解释的：该属性的值指出了不允许有浮动对象的边。
这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除clear:both;
***************************/
所以我们是不是应该在最后加一个<li style="clear:both;display:none"></li>，不知道大家会不会这样做？
问题补充：
就是使得ul里面包含了全部的li,而不置于使得float里的内容脱离ul
问题补充：
to lovewhzlq :
如果您用firebug hacker的时候，你会发现用了这个与没有用这个的区别：ul的高度会不一样。
我曾经写过一个js向上滚动文字的效果时，发现如果不加这个li在ff,chorm,ie8可以滚动，而在 IE 5 6 7里就不行~~加了这个才行
问题补充：
哦不是这个：
<li style="clear:both;display:none"></li>
是这样，刚才写错了：
<div style="clear:both;height:0;width:0"></div>

CSS

2009年11月27日 10:28

kevin-whui-liu
1
0 0 3

10个答案按时间排序按投票排序

0 0

采纳的答案

<STYLE TYPE="text/css">
li {float:left;}
li.tt{float:none;}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<ul id="aa">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li class="tt">测试4，这个li结束时我想换行</li>
<li >测试5</li>
<li>测试6，这个li结束我又不想换行</li>
<li>测试7</li>
</ul>

2009年11月27日 10:36

抛出异常的爱
619
0 0 5

添加评论

0 0

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

2009年11月27日 11:58

lovewhzlq
13934
0 0 0

添加评论

0 0

引用

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

设置了宽度就能满足你的要求，只是宽度要设置为

{
overflow:hidden;
width:24.5%;
}

这样的样子。

2009年11月27日 11:29

Ihavegotyou
945
0 0 0

添加评论

0 0

哪需要用到这种hacker方式

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

2009年11月27日 11:28

lovewhzlq
13934
0 0 0

添加评论

0 0

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

2009年11月27日 11:19

lovewhzlq
13934
0 0 0

添加评论

0 0

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

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

2009年11月27日 11:13

lovewhzlq
13934
0 0 0

添加评论

0 0

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

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

2009年11月27日 10:59

lovewhzlq
13934
0 0 0

添加评论

0 0

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

<STYLE TYPE="text/css">
li {float:left;}
.clear{clear:both;float:none;}
</STYLE>
<ul>
<li class='clear'>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li class='clear'>测试4，这个li结束时我想换行</li>
<li>测试5</li>
<li>测试6，这个li结束我又不想换行</li>
<li>测试7</li>
</ul>

2009年11月27日 10:42

lovewhzlq
13934
0 0 0