Home > Article > Web Front-end > The suspected unsolvable problem of div layout_html/css_WEB-ITnose
The suspected unsolvable problem of div layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:11:42970browse
之前在这个帖子里http://topic.csdn.net/u/20120520/15/3a043360-9b82-4727-b891-f3f8fff57af0.html问过一个div界面布局，得到了Internetleyan小妹的大力帮助，十分感激。但是后来发现那个布局还是为float的做法有机可乘，而实际应用中我们常常要应对一些乱七八糟的布局，不见得都会为float做法留下空隙，比如下面这个布局，我就暂时想不到有什么做法可以布局出来
当然这里还是得强调2个条件，
1.就是不要任何table,纯粹用div组合来实现
2.不得不声明的是，不可以用绝对定位
如果用aobsolute,left,top就不用了，内部的div布局需要使用相对定位
margin-left margin-top float之类的
绝对定位实在太缺乏可复用价值了
求教各位大大，看看有没有什么好招。也请Internetleyan小妹再出良策^_^
回复讨论(解决方案)
先分成左中右三部分。然后再逐步排列。
你用百分比还是像素？
下面是一个960像素的布局。
示例 http://jsfiddle.net/qaWrw/show/
代码 http://jsfiddle.net/qaWrw/
谢谢楼上的大力帮助，非常感激的。是我没说清楚，如果拿去切割一下再去布局div确实没问题的。其实我的本意是想问，就是在一个div内部，不切割的，如果单靠float或者其他什么css来完成这个布局
是我没表达清楚。真的很感谢changjay大哥的帮助
我明天画一个无法拆解的div图上来，changjay大哥就会明白我的意思了，真的很感谢你的热情认真回答
ok，坐等题目。
ok，坐等题目。
changjay大哥，就这个图，你看看怎么解 ^_^
只实现了其中的一部分
其他部分可以用相同方法实现
楼上实现的效果离我要的还是有点距离的吧.......
不过还是很感谢你的帮助^_^
楼上这个布局跟题目好像差别很大啊。
> <
div>
html>
I think there should be a good way but I don’t have time to think about it
I think there should be a good way but I don’t have time to think about it
Key Do you write the height in div5 and then let it expand?
There seems to be a problem under IE6. First left, right, middle
According to the nesting principle of left, right, top and bottom there is no layout that cannot be laid out
In addition, why should we abandon the table
Haha... it’s really great! But there is something I don’t quite understand: "div.div5{width:100px;height:100px;float:left;}" Why should the height value of .div5 be specially set here and not exceed 200px? Anyone who knows upstairs can help me. Solve this doubt! Thank you!
A lazy way, use jquery plug-in.
http://masonry.desandro.com/
Automatically arrange DIVs. < div class="div51">
There seems to be something wrong with IE6
In fact, I just spelled it out without thinking too much, so the scalability is relatively low haha
Got it, the front Set overflow:visible;