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!