About the processing of adaptive layout (using float and margin negative margin)

Adaptive layout is becoming more and more common in practical applications. Today I will share several demos of adaptive layout, mainly the floating holy grail layout (also called double-wing layout, which is mainly implemented by floating and negative margin). I did not introduce the absolute positioning layout because I think you can understand the following examples. The absolute positioning layout is also very simple.

PS: The Holy Grail layout has an advantage, which is that it conforms to the concept of progressive enhancement in front-end development. Because the browser parses the DOM from top to bottom, the Holy Grail layout can put the important content section of the page in front of the DOM and parse it first, while the secondary aside content is placed at the back of the DOM and parsed later.
The following example can solve most of the adaptive layout problems in practical applications. Interested students can study it. The code is as follows:

1. Fixed on the left, adaptive on the right (implementation of the Holy Grail layout):

Copy code

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-left:200px}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-100%}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="right">aside</div>
</body>
</html>

2. Fixed on the right, adaptive on the left (implementation of the Holy Grail layout):

Copy code

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-right:200px}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-200px;}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="right">aside</div>
</body>
</html>

3. Fixed left and right sides, adaptive middle:

Copy code

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body{margin:0;padding:0}
.wrap{ width:100%; float:left}
.content{ height:300px;background:green; margin-left:200px;margin-right:200px}
.left{ width:200px; height:300px; float:left; background:yellow; margin-left:-100%}
.right{ width:200px; height:300px; background:red; float:left; margin-left:-200px}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="left">aside</div>
<div class="right">aside</div>
</body>
</html>

<<: 3 Tips You Must Know When Learning JavaScript

>>: Introduction to commonly used MySQL commands in Linux environment

Tutorial on how to modify the root password in MySQL 5.7

About the processing of adaptive layout (using float and margin negative margin)

Tutorial on how to modify the root password in MySQL 5.7

Solution to transparent font problem after turning on ClearType in IE

Use JavaScript to create page effects

Sample code for implementing PC resolution adaptation in Vue

CentOS 8 custom directory installation nginx (tutorial details)

How to distinguish MySQL's innodb_flush_log_at_trx_commit and sync_binlog

Detailed explanation of how to use several timers in CocosCreator

Why the explain command may modify MySQL data

Detailed explanation of for loop and double for loop in JavaScript

Use of CSS3's focus-within selector

Recommend

How to use docker to deploy front-end applications

How to use Web front-end vector icons

Detailed explanation of performance optimization ideas for React functional components

js to implement collision detection

Vue implements drag progress bar

Detailed explanation of MySQL master-slave replication process

HTML image img tag_Powernode Java Academy

Organize the common knowledge points of CocosCreator

JavaScript removes unnecessary properties of an object

Common tags in XHTML

MySQL pessimistic locking and optimistic locking implementation

Detailed tutorial on installation and configuration of compressed version of MySQL database

Solve the problem of Linux FTP anonymous upload and download starting automatically

Several ways to store images in MySQL database

An article to understand the advanced features of K8S