Wie Sie überlappende CSS Divs verschieben zusammen

August 22

Web-Design-Techniken basieren auf in der Lage, HTML und CSS zu manipulieren; Das sind bzw. HyperText Markup Language und Cascading Style Sheets. Div-Tags sind HTML-Elemente verwendet, um verschiedene Arten von Inhalten zu trennen. Für Web-Designer ist visuell bearbeiten DIVs eine entscheidende Fähigkeit. In der Tat die meisten Web-Design basieren auf könnend, DIVs zu manipulieren. Immer zwei DIVs denselben Raum in einem Browserfenster zu besetzen kann erfolgen. Es ist ein wenig kontraproduktiv, aber erfordert nicht viel Code.

Anweisungen

1 Öffnen Sie einen Texteditor wie Editor. Notizblock findet sich in der Regel unter dem Zubehör-Ordner im Startmenü.

2 Geben Sie den folgenden Code:

< html >

< Körper >

< Stil >

Wrapper {Width: 900px; Margin: 0 Auto;} Div1 {Float: Left; Width: 300px; Höhe: 300px; Hintergrund-Farbe: rot;} Div2 {Float: Left; Width: 300px; Höhe: 300px; Hintergrundfarbe: blau; Rand Links:-50px} < / style >

< Div Id = "Wrapper" >

< Div Id = "div1" >

< / Div >

< Div Id = "div2" >

< / Div >

< / Div >

< / body >

< / html >

Speichern Sie den Code mit der Erweiterung ".html". In einem Webbrowser öffnen. Eine rote und blaue Rechteck werden angezeigt. Jedes farbige Teil ist eigentlich ein Quadrat dieser Farbe. Da sie überlappende sind, ist die volle Farbe einer der Plätze nicht sichtbar.

3 Ändern Sie die folgende Codezeile:

Div2 {Float: Left; Width: 300px; Höhe: 300px; Hintergrundfarbe: blau; Rand Links:-50px} So dass es zu lesen:

Div2 {Float: Left; Width: 300px; Höhe: 300px; Hintergrundfarbe: blau; Rand Links:-300px} Speichern Sie die Datei und öffnen Sie es erneut in einem Webbrowser. Das blaue Quadrat wird komplett roten zusammentreffen.