What are the common adaptive layouts in CSS?
Common adaptive layouts in CSS include: fixed width on the left and adaptive on the right; fixed width on the right and adaptive on the left; fixed width on both sides and adaptive layout in the middle
Today we will introduce the common automatic layouts in CSS. Adapted to the layout, it has certain reference value. I hope it will be helpful to everyone. Next, in the article, we will introduce several methods of adaptive layout in detail
[Recommended courses:CSS course 】
Adaptive layout:
The characteristic of adaptive layout is that it is based on different The device adapts to its screen size, that is, in each static layout, the page elements will change as the window size is adjusted
Method 1
The left side is fixed and the right side is adaptive, generally used for list display on mobile Web
HTML code
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>Implementation method: Give the parent element an absolute position so that its child elements can expand the parent Element height, fixed width on one side and floating on the left, adaptive width and height on the right given percentage
<style type="text/css">
.box{
position: absolute;
width:100%;
height: 100%;
}
.left{
width:200px;
height:100%;
background: pink;
float: left;
}
.right{
width:100%;
height:100%;
background: skyblue;
}
</style>Rendering:
Method 2
Adaptive on the left and fixed width on the right
display:table-cell attribute allows the label element to be presented in the form of a table cell, similar to the td label. This attribute is only applicable to E8 browsers and above, and other modern browsers support this attribute. The use of this attribute brings simplicity to our adaptive layout
HTML code:
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>Implementation method: set the parent element to the table element and then complete it through display:table-cell
.box{
position: absolute;
width:100%;
height: 100%;
display: table;
table-layout: fixed;
}
.left {
width: 200px;
height:100%;
display:table-cell;
background: pink;
}
.right {
display: table-cell;
width:100%;
height: 100%;
display: table-cell;
background: skyblue;
}
</style>Rendering:
Method 3
Fixed width on both sides and adaptive in the middle
HTML code
<div class="box">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>Implementation method: The flex attribute is used to set or retrieve how the child elements of the flex box model object allocate space.
.box{
position: absolute;
display: flex;
width: 100%;
height: 100%;
}
.left {
width: 200px;
height:100%;
float:left;
background: pink;}
.content{
float: left;
height: 100%;
flex: 1;
background-color:#f1f19b;
}
.right {
display: table-cell;
width:200px;
height: 100%;
float: left;
background: skyblue;
}The renderings are as follows:
Summary: The above is the entire content of this article. I hope that through this article, everyone can learn about adaptive layout. A certain understanding.
The above is the detailed content of What are the common adaptive layouts in CSS?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1653
14
1413
52
1305
25
1251
29
1224
24
React responsive design guide: How to achieve adaptive front-end layout effects
Sep 26, 2023 am 11:34 AM
React Responsive Design Guide: How to Achieve Adaptive Front-end Layout Effects With the popularity of mobile devices and the increasing user demand for multi-screen experiences, responsive design has become one of the important considerations in modern front-end development. React, as one of the most popular front-end frameworks at present, provides a wealth of tools and components to help developers achieve adaptive layout effects. This article will share some guidelines and tips on implementing responsive design using React, and provide specific code examples for reference. Fle using React
HTML tutorial: How to use Flexbox for adaptive equal-height, equal-width, equal-spacing layout
Oct 27, 2023 pm 05:51 PM
HTML tutorial: How to use Flexbox for adaptive equal-height, equal-width, equal-spacing layout, specific code examples are required. Introduction: In modern web design, layout is a very critical factor. For pages that need to display a large amount of content, how to reasonably arrange the position and size of elements to achieve good visibility and ease of use is an important issue. Flexbox (flexible box layout) is a very powerful tool through which various flexible layout needs can be easily realized. This article will introduce Flexbox in detail
HTML tutorial: How to use Flexbox for adaptive equal height layout
Oct 21, 2023 am 10:00 AM
HTML tutorial: How to use Flexbox for adaptive equal-height layout, specific code examples are required. Introduction: In web design and development, implementing adaptive equal-height layout is a common requirement. Traditional CSS layout methods often face some difficulties when dealing with equal height layout, and Flexbox layout provides us with a simple and powerful solution. This article will introduce the basic concepts and common usage of Flexbox layout, and give specific code examples to help readers quickly master the use of Flexbox to implement their own
How to use Vue to implement adaptive layout statistical charts
Aug 20, 2023 pm 10:25 PM
Overview of how to use Vue to implement adaptive layout of statistical charts: In modern web applications, statistical charts are an important part of displaying data. Using Vue.js you can easily implement adaptive layout of statistical charts to adapt to different screen sizes and device types. This article will introduce how to use Vue and some commonly used charting libraries to achieve this goal. Create a Vue project and install dependencies First, we need to create a Vue project. You can use VueCLI to quickly build the project structure. In terminal run as
How to use CSS to implement adaptive multi-column layout
Oct 19, 2023 am 09:25 AM
How to use CSS to implement adaptive multi-column layout With the popularity of mobile devices, more and more websites need to adapt to different screen sizes. Using CSS to implement adaptive multi-column layout is an important skill that can make your website look good on various devices. This article will introduce how to use CSS to implement adaptive multi-column layout and give specific code examples. 1. Use Flexbox layout Flexbox layout is a powerful layout model in CSS3 that can easily implement multi-column layout. first,
CSS adaptive layout property optimization tips: flex and grid
Oct 21, 2023 am 08:03 AM
CSS adaptive layout attribute optimization tips: flex and grid In modern web development, implementing adaptive layout is a very important task. With the popularity of mobile devices and the diversification of screen sizes, it is an essential requirement to ensure that the website can be displayed well on various devices and adapt to different screen sizes. Fortunately, CSS provides some powerful properties and techniques for implementing adaptive layout. This article will focus on two commonly used properties: flex and grid, and provide specific code examples.
HTML tutorial: How to use Flexbox for adaptive proportional layout
Oct 25, 2023 am 11:46 AM
HTML tutorial: How to use Flexbox for adaptive proportional layout In modern web development, responsive layout is attracting more and more attention. Flexbox (flexible box layout) is a powerful layout model in CSS that can help developers easily implement adaptive proportional layout. This article will introduce how to use Flexbox to implement this layout, with specific code examples. Flexbox is a model based on containers and items. By setting the properties of the container, you can control
Introducing the different width attributes in CSS
Feb 20, 2024 am 10:03 AM
An introduction to various widths in CSS requires specific code examples. In CSS, width (width) is a commonly used attribute used to define the width of an element. In actual development, we will encounter many situations where we need to set the width of elements, and CSS provides a variety of ways to meet our needs. This article will introduce the various width properties in CSS in detail and provide specific code examples. width:autoWhen we do not define the width of an element in CSS, the default width value is
