Adaptive width (height) of elements based on CSS and CS3 elastic box model

Time:2020-1-19

1、 CSS implementation of left width fixed right width adaptive

1, positioning

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > adaptive < / Title >
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .left{
            background: red;
            width: 200px;
            height: 200px;
            Position: absolute; / * positioning*/
            left: 0;
            top:0;
        }
        .right{
            background: blue;
            height: 200px;
            margin-left: 210px;
        }
    </style>
</head>
<body>
    <div class="left">
        Fixed width
    </div>
    <div class="right">
        self-adaption
</div>
</body>
</html>

2, floating

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > adaptive < / Title >
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .left{
            background: red;
            width: 200px;
            height: 200px;
            Float: left; / * float*/
        }
        .right{
            background: blue;
            height: 200px;
            margin-left: 210px;
        }
    </style>
</head>
<body>
    <div class="left">
        Fixed width
    </div>
    <div class="right">
        self-adaption
</div>
</body>
</html>

3、margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > adaptive < / Title >
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .left{
            background: red;
            width: 200px;
            height: 200px;
        }
        .right{
            background: blue;
            height: 200px;
            margin-top: -200px;/*margin*/
            margin-left: 210px;
        }
    </style>
</head>
<body>
    <div class="left">
        Fixed width
    </div>
    <div class="right">
        self-adaption
</div>
</body>
</html>

2、 Adaptive implementation of CSS3 elastic box model

1. Up and down height fixed middle height adaptive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
        }
        #contain{
            display: flex;
            Flex direction: column; / * column vertical*/
            Height: 100%; / * full screen effect this element and its parent elements and HTML, body height: 100%*/
        }
        #top{
           height: 200px;
            background: red;
        }
        #center {
            flex: 1;
            background: blue;
        }
        #bottom{
            height: 100px;
            background: green;
        }
    </style>
 
</head>
<body>
<div id="contain">
    < div id = "top" > Hello < / div >
    < div id = "center" > Hello < / div >
    < div id = "bottom" > you'd better < / div >
</div>
</body>
</html>

2. Left width fixed right width adaptive
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        #contain {
            Display: Flex; / * parent element sets this attribute*/
        }
 
        #left {
            width: 100px;
            height: 200px;
            background: #fff8a8;
            margin-right: 10px;
        }
 
        #right {
            Flex: 1; / * proportion / copies*/
            height: 200px;
            background: #ff9bad;
        }
    </style>
</head>
<body>
<div id="contain">
    <div id="left"></div>
    <div id="right"></div>
</div>
</body>
</html>

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.

Recommended Today

Vs + QT mixed programming (C / C + +) — 1 introduction application, dynamic calculator

brief introduction For novice users of the interface, to play QT, they still need more practice. For the convenience of learning, this column will be updated in later learning.                     qtThe files included in the generated project are as follows: qt.uiIs the file where the interface is located qt.hHeader file qt.cppImplementing files for functions main.cppMain function […]