+ -
当前位置:首页 → 问答吧 → Div 浮动卡住

Div 浮动卡住

时间:2011-10-11

来源:互联网


如上(左)图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。
如上(右)图所示,如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。

如果想右图也像左图的效果,浮动元素在一行摆不下时,自动换一新行,而不是被第一个框卡住。大家有没有什么解决办法呢?前提是每个div高度都是不相同的。
谢谢!!!!

作者: foovon   发布时间: 2011-10-11

给第二个和第三个框之间加一个清除浮动的样式<div class="clear"></div>

.clear{clear:both}

作者: xiongxinping1234   发布时间: 2011-10-11

第一种方法,统计所有的div的高度

第二种方法,在div1跟div2外围加多一个div

<div>
  <div>div1</div>
  <div>div2</div>
</div>

作者: bear63   发布时间: 2011-10-11

第一种方法,统一所有的div的高度

第二种方法,在div1跟div2外围加多一个div

<div>
  <div>div1</div>
  <div>div2</div>
</div>

作者: bear63   发布时间: 2011-10-11

我是以三个div做为例子的。这些div都是代码中循环生成的,数量都是不定的。还有每个div的宽度高度都是不一样的。

作者: foovon   发布时间: 2011-10-11

用jquery写,碰到偶数的添加个样式 .clear{clear:both;}

作者: xiongxinping1234   发布时间: 2011-10-11