Detaillierte Erläuterung des adaptiven CSS-Layouts

Dieses Mal werde ich Ihnen eine detaillierte Erklärung des adaptiven CSS-Layouts geben. Was sind die Vorsichtsmaßnahmen für das adaptive CSS-Layout? Hier sind praktische Fälle.

Vorwort

In diesem Artikel wird das adaptive Layout im

Seitenlayout vorgestellt. Es gibt zwei gängige adaptive Layouts: linke Spalte, feste rechte Spalte, adaptiv, links und rechts feste und mittlere adaptive Säulen.

1. Die linke Spalte ist fest und die rechte Spalte ist ein adaptives Layoutschema

Erklärung: Die linke Spalte ist fest und die rechte Spalte ist adaptiv und die rechte Die Spalte kann auch fest sein und die linke Spalte ist adaptiv. Wird häufig in Mid-End-Verwaltungsschnittstellen, Listenanzeigen im mobilen Web usw. verwendet.

<p class="container">
    <p class="left">固定宽度</p>
    <p class="right">自适应</p>
</p>

1.1 Untergeordnetes Element float:left

Beschreibung: Die linke feste Spalte ist auf float:left und eingestellt die rechte Spalte ist auf float:left gesetzt. Adaptive Spalten sind auf float:none gesetzt.

CSS:

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    float: none;
    width: 100%;
    height: 100%;
    background-color: #9dc3e6;
}

1.2 Breite des untergeordneten Elements:calc()

Beschreibung: Breite der adaptiven Spalte Automatisch Berechnung basierend auf calc(), wie zum Beispiel: Breite des übergeordneten Containers – feste Spaltenbreite.

Browserunterstützung: IE 9+.

CSS:

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    background-color: #9dc3e6;
}

1.3 Anzeige des übergeordneten Elements: Tabelle

Erklärung: Der übergeordnete Container verwendet Anzeige: Tabelle und table-layout: Wenn es fixiert ist, teilt der untergeordnete Container die Breite des übergeordneten Containers gleichmäßig. Zu diesem Zeitpunkt ist die Breite einer bestimmten Spalte festgelegt und die verbleibenden Spalten teilen weiterhin die übrigen Breite gleich.

Browserunterstützung: IE 8+.

CSS:

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    table-layout: fixed;
}
.left {
    display: table-cell;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    display: table-cell;
    width: 100%;
    height: 100%;
    background-color: #9dc3e6;
}

1.4 Anzeige übergeordneter Elemente: Flex

Browser-Unterstützung : IE 10+.

CSS:

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}
.left {
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    flex: 1;
    height: 100%;
    background-color: #9dc3e6;
}

2. Die linke und rechte Spalte sind fest und die Mitte ist adaptiv

<p class="container">
    <p class="left">左侧定宽</p>
    <p class="mid">中间自适应</p>
    <p class="right">右侧定宽</p>
</p>

2.1 Breite des untergeordneten Elements:calc()

Beschreibung: Die Breite der adaptiven Spalte wird automatisch basierend auf calc() berechnet, wie zum Beispiel: Breite des übergeordneten Containers – fest Spaltenbreite.

Browserunterstützung: IE 9+.

CSS:

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #72e4a0;
}
.mid {
    float: left;
    width: calc(100% - 100px - 100px);
    height: 100%;
    background-color: #9dc3e6;
}
.right {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #4eb3b9;
}

2.2 Anzeige des übergeordneten Elements: Flex

Beschreibung: Stellen Sie die Anzeige auf Flex beim übergeordneten Element ein element Wenn die Flexibilität einer Spalte 1 beträgt und die übrigen Spalten auf eine feste Breite eingestellt sind.

Browserunterstützung: IE 10+.

CSS:

* { margin: 0;padding: 0 }
.container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #72e4a0;
}
.mid {
    float: left;
    height: 100%;
    flex: 1;
    background-color: #9dc3e6;
}
.right {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #4eb3b9;
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Grundkenntnisse von HTML im Frontend ,

Vue-Plug-in implementiert mobiles Karussell Diagramm

Position des CSS-Float-Box-Modells

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des adaptiven CSS-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!