Gewusst wie: Ausrichten von drei Bilder nebeneinander in HTML

Wenn Sie Bilder zu Ihrer Website hinzufügen, nicht diese immer ausgerichtet, wo Sie wollen. Sie können zu einer anderen Zeile oder neben Text springen. Weitere Bilder haben Sie in einer einzigen Zeile, die weniger Platz haben Sie. Es ist am besten Ihr Layout im Browser zu überprüfen, auch wenn es in Ihrem Web-Editor gut aussieht. Sie können Bilder nebeneinander schweben, durch Ihr HTML formatieren. Die Eigenschaft "Float: Left" können Sie Elemente auf der linken Seite einer Web-Seite zu verschieben.

Anweisungen

1 Starten Sie einen Texteditor wie Notepad, TextPad oder WordPad. Wählen Sie im Menü "Datei" und "Open". Suchen Sie und doppelklicken Sie auf die HTML-Datei, die Sie ändern möchten.

2 Fügen Sie den folgenden Code zwischen dem < HEAD > Tag Ihrer Seite. Der aktuelle Code verursacht jedes Bild mit einer Breite von 33 %. Um die Breite zu ändern, ändern Sie "33 %" auf einen anderen Wert, wie die Abmessungen des Bildes. Der Code "Padding-Right: 5px;" fügt ein fünf Pixel Abstand rechts neben jedem Bild. Verwenden einen unterschiedlichen Abstand, "5px;" ändern auf eine andere Nummer. Ändern Sie Polsterung auf der linken Seite des Bildes um hinzuzufügen "Padding-Right", "Padding-Left."

< Typ style = "Text/Css" ><!--IMG.Left {Float: Left;Padding-Right: 5px;Breite: 33 %;}IMG.Middle {Float: Left;Padding-Right: 5px;Breite: 33 %;}IMG.Right {Float: Left;Padding-Right: 5px;Breite: 33 %;}-->< / style >

3 Fügen Sie den folgenden Code zwischen die < BODY >-Tag, wo die drei Bilder gehen sollen. Ersetzen Sie "leftimage.gif", "middleimage.gif" und "rightimage.gif" mit den Namen Ihrer Bilder.

< Div >< Img src="leftimage.gif" Class = "linken" Alt = "Bild-Beschreibung" / >< Img src="middleimage.gif" Class = "mittlere" Alt = "Bild-Beschreibung" / >< Img src="rightimage.gif" Class = "rechts" Alt = "Bild-Beschreibung" / >< / Div >