自适应布局分两类：高度和宽度，方法有很多，我用三列布局举例，我就列几个通俗易懂的例子呗，懂了三列的，两列的原理一样，呵呵哒。
效果图如下：高度自适应——宽度自适应
1,高度自适应布局
原理就是把每个模块设置为绝对定位，然后设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高，然后中间模块的高度就自适应了。代码如下：
html代码：
<body> <div class="top"> 120px </div> <div class="main"> 自适应 </div> <div class="bottom"> 120px </div></body>
css代码：
.top{ width: 100%; height: 120px; position: absolute; background-color: greenyellow; }.main{ position: absolute; width: 100%; top: 120px; bottom: 120px; background-color: azure; height: auto;}.bottom{ position: absolute; bottom: 0;//别漏了 width: 100%; height: 120px; background-color:greenyellow ;}
2,宽度自适应，有三种方法，分别是用绝对定位；利用margin，中间模块先渲染；自身浮动。
a，用绝对定位来设置宽度自适应布局，原理：针对自适应模块使用绝对定位，在把left和right设置为左右两列的宽，其实原理和高度自适应一样，另外左右两列分别左右浮动。
html代码：
<body> <div class="left"> 200px </div> <div class="main"> 自适应 </div> <div class="right"> 200px </div></body>
css代码：
html,body { margin: 0; height: 100%; padding: 0; font-size: 30px; font-weight: 500; text-align: center;}.left,.right { width: 200px; display: inline; height: 100%; background-color: greenyellow;}.left { float: left;}.right { float: right;}.main { position: absolute; left: 200px; right: 200px; height: 100%; background-color: azure; display: inline;} b，中间一列优先渲染的自适应三列布局，优先渲染（加载）的关键：内容在html里面必须放在前面。自适应的div必须放在left和right前面且包含在一个父div里。父div，left和right模块都向左浮动，然后对自适应的div（就是父div里的子div）设置margin：0 200px，然后对left的margin-left的属性值设置为100%的负数，就是margin-left：-100%；对right的margin-left的属性值设置为自身宽度的负数，就是margin-left：-200px。
注意：自适应的div必须放在left和right前面且包含在一个父div里。
html代码：
<body> <div class="main"> <!--看清楚，这里用一个父div包住--> <div class="content"> 自适应 </div> </div> <div class="left"> 200px </div> <div class="right"> 200px </div></body>
css代码：
html,body { margin: 0; height: 100%; padding: 0; font-size: 30px; font-weight: 500; text-align: center;}.main { width: 100%; height: 100%; float: left;}.main .content { margin: 0 200px; background-color: azure; height: 100%;}.left,.right { width: 200px; height: 100%; float: left; background-color: greenyellow;}.left { margin-left: -100%; //important}.right { margin-left: -200px; //important} c，自身浮动，原理：中间列设置margin属性，就是把左右列分别左右浮动。注意：使用这个方法布局自适应的话，必须把自适应的那一列在html中放在left和right后面。
html代码：
<body> <div class="left"> 200px </div> <div class="right"> 200px </div> <div class="main"> 自适应 </div></body>
css代码：
html,body { margin: 0; height: 100%; padding: 0; font-size: 30px; font-weight: 500; text-align: center;}.main { margin: 0 200px; height: 100%; background-color: azure;}.left,.right { width: 200px; height: 100%; background-color: greenyellow;}.left { float: left;}.right { float: right;}
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
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
SublimeText3 Linux new version
SublimeText3 Linux latest version
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
