如何让div纵向float

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<style>

.item{width:100pxheight:200pxbackground-color:blackcolor:whitefloat:left}

</style>

<div id="container">

<div class="item">1</div>

<div class="item">2</div>

...

<div class="item">18</div>

</div>

<script>

//插入3个空的div表示要放3行。

$('#container').after('<div id="div1"></div><div id="div2"></div><div id="div3"></div>')

//将第1,4,7,10,...放入第一个div中

$('#container div.item:nth-child(3n+1)').appendTo('#div1')

//将余下的部分的奇数个放入div2

$('#container div.item:nth-child(2n+1)').appendTo('#div2')

//将余下的部分全部放入div3

$('#container div.item').appendTo('#div3')

</script>

又是这个问题。。。举个例子，你一看就明白：

<div>

<divstyle="float:left">aaaaaaaaaaaaaa</div>

<divstyle="float:left">bbbbbbbbbbbbbb</div>

以上这两个div就是横向排列。

<divstyle="clear:both"></div>这个东西很重要，它清除上两个层的浮动，也就是说以下的层就继续垂直排列了。

<div>这个层就垂直排列了</div>

<div>这个层就垂直排列了</div>

</div>

下面我打个广告：http://www.daniuhaishen.com

这是我做的，看看它的源码就知道了，很简单的页面，一看就明白

据我推测不是margin失效，因为你使用了紧跟着的上一个div，就是上面的那个长图，div没有高度，导致margin-top失效：

解决办法：设置上一个DIV高度；

也有可能是float导致的上一个div没有高度，解决办法是在div的结尾处，加上

<div style="clear:both"></div>

来清除浮动

---