CSS-adaptives Layout: Wie implementiert man die CSS-Breitenanpassung?

Das heutige Webseitenlayout muss sich an verschiedene Bildschirme anpassen und daher anpassungsfähig sein, damit der Inhalt der Webseite vollständig angezeigt werden kann. Daher wird Ihnen der heutige Artikel die automatische CSS-Breite von Inhalten vorstellen. Lassen Sie uns ausführlich darüber sprechen, wie Sie die CSS-Breitenanpassung im adaptiven CSS-Layout implementieren.

Empfohlene verwandte Artikel:
1.Wie erreiche ich eine CSS-Höhenanpassung? Eine einfache Möglichkeit, die CSS-Höhe an den Inhalt anzupassen
2.Was sind die gängigen adaptiven Layouts in CSS
Ähnliche Videoempfehlungen:
1.CSS-Video-Tutorial – Jade Girl Heart Sutra Edition

Wir sehen oft Seiten wie diese. Die linke (oder rechte) Seite ist eine feste Navigations- oder Menüleiste, und die andere Seite ändert ihre Größe adaptiv, wenn der Browser vergrößert wird. Dies ist tatsächlich die Breite der Seite. Umsetzung der Anpassung.

Es gibt zwei gängigste Implementierungsmethoden für die CSS-Breitenanpassung: Eine ist ein zweispaltiges Layout und die andere ist ein dreispaltiges Layout

Lass es uns tun Im Folgenden stellen wir jede dieser beiden Methoden kurz vor.

1. CSS-breitenadaptives zweispaltiges Layout:

Nehmen wir als Beispiel die rechte Seite mit fester Breite und die linke Seite mit adaptiver Breite:

1. Der Bereich mit fester Breite schwebt, und der adaptive Bereich legt keine Breite und keinen Rand fest

<div id="wrap">
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
  <div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>
</div>

rrree

Hinweis:

Die rechte Seite ist immer fest und die linke Seite basiert auf der anpassbaren Größe.

Aber tatsächlich hat diese Methode Einschränkungen, das heißt, die Seitenleiste muss vor dem Inhalt in der HTML-Struktur stehen.

2. Verwenden Sie Float und Margin zusammen

#sidebar {
  float: right; width: 300px;
}#content {
  margin-right: 300px;
}

rrree

Erklärung: Auf diese Weise ist die tatsächliche Breite von contentInner die Bildschirmbreite -300px.

3. Verwenden Sie die absolute Positionierung für den Bereich mit fester Breite und legen Sie den Rand für den adaptiven Bereich fest

<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">
    <div class="contentInner">
       自适应区    </div>
  </div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

rrree

4. Verwenden Sie display:table, um

#content {
  margin-left: -300px; float: left; width: 100%;
}#content .contentInner{
  margin-left:300px;
}#sidebar {
  float: right; width: 300px;
}

<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
  </div>

Hinweis: Diese Methode ist nicht mit IE7 und niedrigeren Browsern kompatibel, da IE7 die Einstellung der Anzeige auf Tabelle nicht erkennt.

2. CSS-breitenadaptives dreispaltiges Layout:

1. Dreispaltiges Layout mit fester Breite

#wrap{
  position:relative;
}#content {
  margin-right:300px;
}#sidebar {
  position:absolute;
  width:300px;
  right:0;
  top:0;
}

rrree

2. Dreispaltiges Layout mit fester Breite links und rechts und adaptiver Breite in der Mitte

<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

rrree

Erklärung: Wenn die Breite der linken und rechten Divs festgelegt ist und die Breite von Das mittlere Div ist unbekannt, das dreispaltige Layout kann mit Floating nicht erreicht werden. Verwenden Sie die absolute Positionierung, um ein dreispaltiges Layout zu erreichen: Sie müssen das linke und das rechte Element auf absolute Positionierung einstellen und die linken und rechten Randwerte des mittleren Elements auf die Breite des rechten bzw. linken Elements einstellen . Sie können ein dreispaltiges Layout erreichen, ohne das übergeordnete Element umzuschließen. Wenn ein übergeordnetes Element vorhanden ist, müssen Sie das übergeordnete Element auf relative Positionierung einstellen. (Informationen zur Positionierung finden Sie im

CSS-Handbuch)

Verwandte Empfehlungen:

Wie passt CSS die Div-Breite an content_html/css_WEB-ITnose an

CSS implementiert eine feste Breite auf der rechten Seite und eine adaptive Breite auf der linken Seite_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonCSS-adaptives Layout: Wie implementiert man die CSS-Breitenanpassung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!