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

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

Recommend

CSS implements five common 2D transformations

2D transformations in CSS allow us to perform som...

Implement a simple search engine based on MySQL

Table of contents Implementing a search engine ba...

TypeScript problem with iterating over object properties

Table of contents 1. Problem 2. Solution 1. Decla...

How to build php+nginx+swoole+mysql+redis environment with docker

Operating system: Alibaba Cloud ESC instance cent...

When MySQL is upgraded to 5.7, WordPress reports error 1067 when importing data

I recently upgraded MySQL to 5.7, and WordPress r...

vue.js Router nested routes

Preface: Sometimes in a route, the main part is t...

Hbase Getting Started

1. HBase Overview 1.1 What is HBase HBase is a No...

CSS 3.0 text hover jump special effects code

Here is a text hovering and jumping effect implem...

JavaScript web form function communication full of practical information

1. Introduction Earlier we talked about the front...

WeChat applet implements video player sending bullet screen

This article shares the specific code for WeChat ...

Several ways to encapsulate axios in Vue

Table of contents Basic Edition Step 1: Configure...

Ubuntu Basic Tutorial: apt-get Command

Preface The apt-get command is a package manageme...

Solution to the inconsistency between crontab execution time and system time

Preface In LINUX, periodic tasks are usually hand...

JavaScript to implement search data display

This article shares the data display code for Jav...

How to use MyCat to implement MySQL master-slave read-write separation in Linux

Table of contents Linux-Use MyCat to implement My...