Heim >Web-Frontend >HTML-Tutorial >Machen Sie die Div-Breite für den Unterricht adaptiv

Machen Sie die Div-Breite für den Unterricht adaptiv

php中世界最好的语言
php中世界最好的语言Original
2017-11-29 11:46:185676Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn