Was sind die gängigen adaptiven Layouts in CSS?

Übliche adaptive Layouts in CSS umfassen: feste Breite auf der linken Seite und adaptive auf der rechten Seite; feste Breite auf der linken Seite und adaptives Layout in der Mitte; 🎜>Heute werden wir die gängigen adaptiven Layouts in CSS vorstellen. Das angepasste Layout hat einen gewissen Referenzwert, ich hoffe, es wird für alle hilfreich sein. Als nächstes werden wir in dem Artikel verschiedene Methoden des adaptiven Layouts im Detail vorstellen

[Empfohlene Kurse:

CSS-Kurs 】

Adaptives Layout:

Das Merkmal des adaptiven Layouts ist, dass es darauf basiert unterschiedlich Das Gerät passt sich seiner Bildschirmgröße an, d. h. in jedem statischen Layout ändern sich die Seitenelemente, wenn die Fenstergröße angepasst wird

Methode 1

Die linke Seite ist fest und die rechte Seite ist adaptiv und wird im Allgemeinen für die Anzeige mobiler Weblisten verwendet

HTML-Code

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    </div>

Implementierungsmethode: Geben Sie dem übergeordneten Element eine absolute Position, damit seine untergeordneten Elemente kann die Höhe des übergeordneten Elements erweitern, auf einer Seite feste Breite und auf der linken Seite schwebend, auf der rechten Seite adaptive Breite und Höhe, gegebener Prozentsatz

 <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:

Methode 2

Die linke Seite ist adaptiv und die rechte Seite hat eine feste Breite

Das display:table-cell-Attribut ermöglicht die Beschriftung Element, das in Form einer Tabellenzelle dargestellt werden soll, ähnlich dem td-Tag. Dieses Attribut gilt nur für E8-Browser und höher, und andere moderne Browser unterstützen dieses Attribut. Die Verwendung dieses Attributs vereinfacht unser adaptives Layout

HTML-Code:

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    </div>

Implementierungsmethode: Setzen Sie das übergeordnete Element auf das Tabellenelement und vervollständigen Sie es dann über 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:

Methode 3

Feste Breite auf beiden Seiten und adaptiv in der Mitte

HTML-Code

<div class="box">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
    </div>

Implementierungsmethode: Das Flex-Attribut wird verwendet, um festzulegen oder abzurufen, wie die untergeordneten Elemente des Flex-Box-Modellobjekts Platz zuweisen.

 .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;
        }

Die Darstellung ist wie folgt:

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass jeder durch diesen Artikel lernen kann über adaptives Layout.

Das obige ist der detaillierte Inhalt vonWas sind die gängigen adaptiven Layouts in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!