Beliebte Beiträge Auf Dem Pc Und Software

Top Artikel Auf Internet - 2018

CSS Float

Die CSS-Eigenschaft ist eine sehr wichtige Eigenschaft für das Layout. Damit können Sie Ihre Webseiten-Designs genau so positionieren, wie sie angezeigt werden sollen. Um sie zu verwenden, müssen Sie jedoch verstehen, wie sie funktioniert.

In einem Stylesheet sieht die CSS-Eigenschaft float wie folgt aus:

.right {float: rechts; }

Dies teilt dem Browser mit, dass alles mit der Klasse "right" nach rechts verschoben werden soll.

Sie würden es wie folgt zuweisen:

class = "right" />

Was können Sie? Float mit der CSS float -Eigenschaft?

Sie können nicht jedes Element auf einer Webseite floaten. Sie können nur Elemente auf Blockebene schweben lassen. Dies sind die Elemente, die einen Platz auf der Seite belegen, wie images (), paragraphen (), divisions () und lists ().

Andere Elemente, die den Text beeinflussen, aber keine Box erstellen Die Seite wird Inline-Elemente genannt und kann nicht floating sein. Dies sind Elemente wie span (), Zeilenumbrüche (), starke Hervorhebung () oder Kursivschrift ().

Wo schweben sie?

Sie können Elemente nach rechts oder links schweben lassen. Jedes Element, das dem floated-Element folgt, wird um das floated-Element auf der anderen Seite fließen.

Wenn ich beispielsweise ein Bild nach links schweben lasse, fließt jeder Text oder andere Elemente, die ihm folgen, nach rechts. Und wenn ich ein Bild nach rechts schweben lasse, fließt jeder Text oder andere Elemente, die ihm folgen, nach links. Ein Bild, das in einen Textblock ohne Fliessstil eingefügt wird, zeigt jedoch an, dass der Browser so eingestellt ist, dass Bilder angezeigt werden.

Dies wird normalerweise mit der ersten Zeile des folgenden Textes am unteren Rand des Bildes angezeigt

Wie weit schweben sie?

Ein Float-Element wird so weit wie möglich nach links oder rechts des Containerelements verschoben. Je nachdem, wie Ihr Code geschrieben ist, ergeben sich mehrere verschiedene Situationen.

Für diese Beispiele werde ich ein kleines Element DIV nach links schweben lassen:

  • Wenn das floated-Element kein a Vordefinierte Breite, nimmt so viel horizontalen Platz wie erforderlich und verfügbar, unabhängig von der Float. Hinweis: Einige Browser versuchen, Elemente neben floated-Elementen zu platzieren, wenn die Breite nicht definiert ist. Dies gibt dem nicht floatenden Element normalerweise nur wenig Platz. Sie sollten also bei floated-Elementen immer eine Breite definieren.
  • Wenn das container-Element das HTML-Element ist, sitzt das floated DIV am linken Seitenrand.
  • Wenn das Containerelement selbst von etwas anderem umgeben ist, befindet sich das Floating DIV am linken Rand des Containers.
  • Sie können floated-Elemente verschachteln, was dazu führen kann, dass der Float in den Container gelangt ein überraschender Ort. Zum Beispiel ist dieses Float ein linkes floated DIV innerhalb eines rechts floated DIV .
  • Floated Elemente sitzen nebeneinander, wenn im Container Platz ist. Dieser Container verfügt beispielsweise über drei 100 px breite DIV -Elemente, die in einem 400-Pixel-Container schweben.

Sie können sogar Floats verwenden, um ein Fotogalerie-Layout zu erstellen. Sie setzen jedes Thumbnail (es funktioniert am besten, wenn sie alle die gleiche Größe haben) in einem DIV mit der Beschriftung und dem Float der DIV Elemente im Container.

Egal wie Wenn Sie wissen, wie Sie ein Element zum Floaten bringen können, ist es wichtig zu wissen, wie Sie den Float ausschalten können. Sie deaktivieren den Float mit der CSS-Eigenschaft clear. Sie können linke Floats, rechte Floats oder beide löschen:

clear: left;

clear: right;

clear: beide;
Jedes Element, für das Sie die clear-Eigenschaft festlegen, wird unterhalb eines Elements angezeigt ist in diese Richtung geschwebt. In diesem Beispiel werden die ersten beiden Absätze des Textes nicht gelöscht, aber die dritte ist.
Spielen Sie mit dem Löschwert verschiedener Elemente in Ihren Dokumenten, um verschiedene Layout-Effekte zu erhalten.

Eines der interessantesten Floating-Layouts ist eine Reihe von Bildern in der rechten oder linken Spalte neben Textabsätzen. Auch wenn der Text nicht lang genug ist, um über das Bild zu scrollen, können Sie das Löschen aller Bilder verwenden, um sicherzustellen, dass sie in der Spalte und nicht neben dem vorherigen Bild angezeigt werden.

HTML (diesen Absatz wiederholen) :

Duis aure irure dolored sed eiusmod tempor incididunt in represenderit in voluptate. Cupidatat non proident, ut labore et dolor magna aliqua.

Das CSS (um die Bilder nach links zu verschieben):

img.float {float: links;

clear: links;

margin: 5px ;
}
Und rechts:
img.float {float: rechts;

clear: rechts;

margin: 5px;
}
Verwenden von Floats für Layout
Sobald Sie verstanden haben, wie die Eigenschaft

float

funktioniert, können Sie damit beginnen, Ihre Webseiten zu erstellen. Dies sind die Schritte, die ich zum Erstellen einer schwebenden Webseite ausführen muss: Entwerfen Sie das Layout (auf Papier oder in einem Grafikwerkzeug oder in meinem Kopf) Bestimmen Sie, wo die Seitenteilung sein soll.

  • Bestimmen die Breiten der verschiedenen Behälter und der Elemente darin.
  • Alles schweben lassen. Sogar das äußerste Containerelement ist nach links verschoben, so dass ich weiß, wo es in Bezug auf den Browser-Ansichtsport sein wird.
  • So lange Sie die Breiten (Prozentsätze sind in Ordnung) Ihrer Layoutabschnitte kennen, können Sie die verwenden
  • float

-Eigenschaft, um sie dort zu platzieren, wo sie auf die Seite gehören. Und das Schöne ist, Sie müssen sich nicht so viele Sorgen machen, dass das Box-Modell für Internet Explorer oder Firefox anders ist.

Senden Sie Ihren Kommentar