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

Detailed explanation of mysql MGR single-master and multi-master mode switching knowledge points

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

Detailed explanation of mysql MGR single-master and multi-master mode switching knowledge points

Summary of xhtml block level tags

Solution to the problem of MySQL thread in Opening tables

JavaScript implements countdown on front-end web page

Detailed explanation of JSON.parse and JSON.stringify usage

MySQL 8.0.13 decompression version installation and configuration method graphic tutorial

Echarts implements switching different X-axes in one graph (example code)

In-depth understanding of the creation and implementation of servlets in tomcat

react-diagram serialization Json interpretation case analysis

Ubuntu 16.04 kernel upgrade steps

Recommend

Solve the problems encountered when installing MySQL 8.0 on Win10 system

How to solve "Unable to start mysql service error 1069"

Example of implementing text wrapping in html (mixed text and images in html)

Summary and examples of vue3 component communication methods

How many pixels should a web page be designed in?

7 Best VSCode Extensions for Vue Developers

WeChat applet implements waterfall flow paging scrolling loading

The problem of Vue+tsx using slot is not replaced

Detailed explanation of adding security group rules to Alibaba Cloud Server (graphic tutorial)

Example code for building an admin dashboard layout using CSS and JavaScript

HTML table tag tutorial (34): row span attribute ROWSPAN

Vue implements a simple shopping cart example

Docker implements re-tagging and deleting the image of the original tag

Front-end state management (Part 2)

Cleverly use CSS3's webkit-box-reflect to achieve various dynamic effects