Home Web Front-end JS Tutorial css adaptive layout

css adaptive layout

Mar 19, 2018 am 10:31 AM
css layout

This time I will bring you the adaptive layout of css. What are the precautions for css adaptive layout? The following is a practical case, let’s take a look.

First of all, I don’t know who came up with this ridiculous and pretentious name. The general idea is that the content in the middle performs width adaptive operations according to the different widths of the browser, while the content on both sides has a fixed width. .

Come on, let’s demonstrate the last code:

 1     <style> 2             *{ 3                 margin: 0; 4                 padding: 0; 5             } 6             .wrap { 7                 background-color: #FBD570; 8                 overflow: hidden; 9             }10             .left {11                 float: left;12                 width: 100px;13                 background: #00f;14                 height: 180px;15             }16             .right {17                 float: right;18                 width: 150px;19                 background: #0f0;20                 height: 200px;21             }22             .center {23                 background: #B373DA;24                 height: 150px;25                 margin-left: 100px;26                 margin-right: 150px;27             }28         </style>29     </head>30     <body>31         <p class="wrap">32             <p class="center">center,可以自适应浏览器宽度,高度可固定也可以由内容撑开。</p>33             <p class="left">left,宽度固定,高度可固定也可以由内容撑开</p>34             <p class="right">right,宽度固定,高度可固定也可以由内容撑开</p>35         </p>36     </body>
Copy after login
Then the effect will be like this:

The middle part of this big guy is indeed It can change as the width of the browsing window changes:

 

But, damn, it’s very curious, isn’t it? ! What the hell is the main body in the middle crossing over the content on both sides? What we want is to have them on a horizontal line. Change the code to the following:

 1 <style> 2             *{ 3                 margin: 0; 4                 padding: 0; 5             } 6             .wrap { 7                 background-color: #FBD570; 8                 padding: 0 150px 0 100px; 9                 overflow: hidden;10             }11             .left {12                 float: left;13                 width: 100px;14                 background: #00f;15                 height: 180px;16                   margin-left: -100%;17                   position: relative;18                   left:-100px;19             }20             .right {21                 float: right;22                 width: 150px;23                 background: #0f0;24                 height: 200px;25                 margin-left: -150px;26                 position: relative;27                   right:-150px;28             }29             .center {30                 background: #B373DA;31                 height: 150px;32                 float: left;33                 width: 100%;34             }35         </style>36     </head>37     <body>38         <p class="wrap">39             <p class="center">center,可以自适应浏览器宽度,高度可固定也可以由内容撑开。</p>40             <p class="left">left,宽度固定,高度可固定也可以由内容撑开</p>41             <p class="right">right,宽度固定,高度可固定也可以由内容撑开</p>42         </p>43     </body>
Copy after login
The idea is as follows: To make the left box go up, you need to set the width of the middle box with a negative left margin, that is,

.left {margin-left:- 100%;}. In this way, the left box can be moved to the far left. To make the box on the right go up

, you need to set its own width with a negative left margin, which is

.right {margin-left: -150px;}. In this way, the right box can display itself on the rightmost side of the row.

 

 Do you think it’s done? In fact, there is not, because the words "center, yes" in the middle main part are blocked, which means that the two new so-called "flying wings" block the content of the main body. So we still need to move these two small broken wings, but we can't move them outside the screen, because we won't be able to see them.

So, we do the following, use the parent element to set the left and right

padding values, and squeeze the three sub-boxes of the parent toward the middle. That is.wrap{ padding: 0 150px 0 100px;}. This frees up a little space for these two little broken wings.

 

 Finally, "pull out" the two small broken wings on the left and right respectively, that is

.left{ position: relative; left: -100px;}
.right{position: relative;right: -150px;}
Copy after login
 

 In this way, this The layout of the two-way tea cup is completed.

 

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The solution to the problem that the text in the Safari browser select drop-down list is too long and does not wrap

##HTML and CCS Combined with the


Gulp command to generate a sprite chart

The above is the detailed content of css adaptive layout. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What does placeholder mean in vue What does placeholder mean in vue May 07, 2024 am 09:57 AM

What does placeholder mean in vue

How to write spaces in vue How to write spaces in vue Apr 30, 2024 am 05:42 AM

How to write spaces in vue

What does span mean in js What does span mean in js May 06, 2024 am 11:42 AM

What does span mean in js

What does rem mean in js What does rem mean in js May 06, 2024 am 11:30 AM

What does rem mean in js

How to introduce images into vue How to introduce images into vue May 02, 2024 pm 10:48 PM

How to introduce images into vue

What is the function of span tag What is the function of span tag Apr 30, 2024 pm 01:54 PM

What is the function of span tag

How to wrap prompt in js How to wrap prompt in js May 01, 2024 am 06:24 AM

How to wrap prompt in js

What language is the browser plug-in written in? What language is the browser plug-in written in? May 08, 2024 pm 09:36 PM

What language is the browser plug-in written in?

See all articles