简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

Fixed left side, adaptive layout on the right side

php中世界最好的语言
Release： 2018-03-22 15:22:28
Original
2161 people have browsed it

This time I will bring you the layout method of fixed left side and adaptive right side. What are the precautions for the layout method of fixed left side and adaptive right side? The following is a practical case. Let’s take a look. take a look.

The first method: 

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
position: absolute;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
height: 200px;
margin-left: 300px;
background-color: red;
}
</style>
</head>
<body>
<p class="one"></p>
<p class="two">第一种方法</p>
</body>
</html>
Copy after login

The second method: 

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
float:left;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
overflow: auto;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<p class="one"></p>
<p class="two">第二种方法</p>
</body>
</html>
Copy after login
I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Implementation of css3 visual effects

Detailed explanation of dynamically loaded css

How to use the webkit-tap-highlight-color property of CSS3

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

Related labels：
Right layout
source：php.cn
Previous article：The difference between width:100%; and width:auto Next article：Three methods of horizontally and vertically centering absolutely positioned elements
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
Latest Articles by Author
Latest Issues
How to access $vuetify instance in setup function Is there a way to access $vuetify (and any other added globals) in the settings function? ...
From 2023-11-17 17:47:45
0
1
366
Leverage VueJS components in PHP I want to mix basic HTML generated by Php and VueJS components without having to use VueJS...
From 2023-11-11 00:01:44
0
2
288
How to publish SQLite database data to an online MySQL database in Flutter? How to sync offline SQLite to MySQL online database in Flutter? Any suggestions?
From 2023-11-10 12:36:40
0
2
247
Laravel: GuzzleHttp\Exception\ConnectException: cURL Error 7: Connection failed I'm trying to publish a 3rd party Api with raw principal using my controller, when I test ...
From 2023-11-09 18:54:47
0
1
196
Livewire undefined I'm having trouble deploying my LaravelLivewire project to the server. The problem is that...
From 2023-11-09 15:34:23
0
1
233
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！