The suspected unsolvable problem of div layout_html/css_WEB-ITnose
之前在这个帖子里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;
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1359
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
