要求：div1和div3靠左悬浮，div2和div4靠右悬浮，这四个div都不设置高度，里面的内容增加，高度自动增加
div5是最外边，宽度1000px，居中，高度不设置，随着里面的四个div的增大而增大
我写了好几遍，总是在最外层div5出错，如果不设置高度，div5总是不能包括里面的四个div，里面的全都跑出来了
相信这么简单，一定有很多人会，帮忙指点一下吧
回复讨论(解决方案)
作业、LZ你又不好好学了、
div1234 dispaly：inline-block
作业、LZ你又不好好学了、 作业？不是的，没事做几个网页出来，以前都是用table布局，似乎加载速度比较慢，用div布局又不熟练
div1234 dispaly：inline-block 初步问题是解决了，这时候如果在div1中写入东西，高度就会增加，但div3不会紧跟在div1的下面，div3会跑到右侧div4的下面。如果在div2中写入东西的话，虽然div4会继续留在div2的下面，但是div1和div3的位置又会发生变化。我说的太乱了，不知你理解我的意思不理解，有没有较为完美的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style type="text/css">body{margin:0px;padding:0px;font:12px/24px Helvetica, Microsoft YaHei, Tahoma, Arial, sans-serif;}div{margin:0px;padding:0px;}.div5{width:610px;padding:20px;margin:100px auto;border:1px #333 solid;}.div5 .left{float:left;width:300px;}.div5 .left .div1{border:1px #333 solid;}.div5 .left .div3{margin-top:10px;border:1px #333 solid;}.div5 .right{float:right;width:300px;}.div5 .right .div2{border:1px #333 solid;}.div5 .right .div4{margin-top:10px;border:1px #333 solid;}.clear{clear:both;}</style><body><div class="div5"> <div class="left"> <div class="div1">内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</div> <div class="div3">内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3</div> </div> <div class="right"> <div class="div2">内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2</div> <div class="div4">内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4</div> </div> <div class="clear"></div></div></body></html> CSS code?123456789101112131415161718192021222324252627282930313233nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">…… 完全符合要求，多谢了
CSS code?123456789101112131415161718192021222324252627282930313233nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">…… 刚才没看清，其实也不太符合要求，因为你多用了
很实用呀，以后可以多用div来布局，方便又省时呀！！
像calmthink好好学习！！
What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PMThe article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PMThe article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PMThe 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.
What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PMThe 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 <meter> element?Mar 21, 2025 pm 12:35 PMThe 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 are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PMArticle discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PMThe 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 the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PMThis 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
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
WebStorm Mac version
Useful JavaScript development tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver Mac version
Visual web development tools
Notepad++7.3.1
Easy-to-use and free code editor
