Heim > Artikel > Web-Frontend > Machen Sie die Div-Breite für den Unterricht adaptiv
Machen Sie die Div-Breite für den Unterricht adaptiv
- php中世界最好的语言Original
- 2017-11-29 11:46:185639Durchsuche
Wir alle wissen, dass beim CSS-Layout, wenn kein Stil für das Div festgelegt ist, das Div eine exklusive Zeile einnimmt und der Standard-CSS-Stil 100 % Breite hat. Dieses Mal zeigen wir Ihnen also, wie Sie die DIV-Breite adaptiv implementieren Die Breite nimmt mit dem Inhalt von Null zu. Und die Breite nimmt zu? Anstatt die Breite des gesamten Bildschirms von Anfang an auf 100 % einzustellen
Lösung:
Verwenden Sie CSS float, um die Div-Standardbreite auf 100 % einzustellen. basierend auf dem adaptiven Breiteneffekt.
Ein kleiner Fall, in dem die Div-Breite mit CSS von Grund auf neu gestartet wird
1. Vollständiger HTML+CSS-Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小实例</title>
<style>
.case{ float:left}
</style>
</head>
<body>
<div>未设置float内容一</div>
<div>未设置float内容二</div>
<div class="case">加float样式的内容三</div>
<div class="case">对其加float样式的内容四</div>
</body>
</html>Schlüsselcode: Float zu Div hinzufügenFloating Stil, sodass seine Breite nicht bei 100 % beginnt, sondern sich mit der Menge des Inhalts ändert, genau wie die anfängliche Breite der Spanne, die mit zunehmendem Inhalt zunimmt.
Zusammenfassung:
Durch das Festlegen von Float für ein Div über CSS wird der Standardstil für die Vollbildbreite des Div entfernt. Im Allgemeinen müssen Sie jedoch ein solches Feld verwenden, das die Inhaltsbreite von Grund auf anpasst. und Sie können den Float-Stil nicht verwenden. Dies kann durch die Verwendung des Span-Tags erreicht werden.
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!
Verwandte Lektüre:
So ändern Sie den Mouseover-Stil ohne Verwendung von CSS
Js-Operation Der Prozess des DOM-Objekts
CSS-Dateimethode mit unterschiedlichen Auflösungen aufrufen
Das obige ist der detaillierte Inhalt vonMachen Sie die Div-Breite für den Unterricht adaptiv. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!