2016-05-14 10 views
0

Hier ist ein Satz vier Bilder an verschiedenen Stellen auf dem Bildschirm platziert werden, habe ich die Koordinaten im Code erwähnt. Eigentlich möchte ich meine Bilder oben links koordinieren wie im Code positioniert. Aber es funktioniert nicht. Könnten Sie bitte helfen, den Fehler zu finden? Platzieren Sie mehrere Bilder an verschiedenen Stellen auf dem Bildschirm in CSS an bestimmten Koordinaten

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style type="text/css"> 
 
#imagegroup1{ 
 
\t display:inline; 
 
\t positon:absolute; 
 
\t top:160px;/*pos 
 
\t left:690px; 
 
\t 
 
\t } 
 
\t #imagegroup2{float:left; 
 
\t display:inline; 
 
\t positon:static; 
 
\t top:160px; 
 
\t left:1000px; 
 
\t } 
 
#imagegroup3{ 
 

 
\t display:inline; 
 
\t positon:absolute; 
 
\t top:360px; 
 
\t left:690px; 
 
\t 
 
\t } 
 
#imagegroup4{ 
 
\t display:inline; 
 
\t positon:absolute; 
 
\t top:360px; 
 
\t left:1000px; 
 
\t 
 
\t } 
 
</style> 
 
</head> 
 
<body> 
 
<div id ="imagegroup1"><img src="img1.jpg" height="180px" width="270px"/></div> 
 
<div class="imagegroup2"><img src="img2.jpg" height="180" width="270"/></div> 
 
<img id="imagegroup3" src="img3..jpg" height="180" width="270"/> 
 
<img id="imagegroup4" src="img4.jpg" height="180" width="270"/> 
 

 
</body>

+0

Es gibt einen Teilkommentar ('/ * pos') in Zeile 4 Ihres CSS. Sie sollten ('* /') vervollständigen oder löschen. –

+0

hey es kam zufällig !! –

Antwort

0

Der beste Weg, um dies zu realisieren ist ein Gitter aus einem CSS-Framework zu verwenden (Bootstrap, Stiftung usw.). Die Verwendung von Float wird für diese Art der Positionierung nicht empfohlen. Wenn Sie kein CSS-Framework verwenden möchten, können Sie eine Tabelle verwenden.

Sie könnten einfach alles neu positionieren, indem Sie diese Struktur verwenden. Und es wird viel einfacher sein, ein responsives Design zu implementieren.

+0

auf diese Weise muss ich nur die oberen Koordinaten des Tisches richtig positionieren! –

+0

Verwendung der absoluten Positionierung ja. In deiner CSS addiere Position: absolut; oben: SomeNumberpx; links: someNumber px. – ThomasK

+0

Bei weiterer Überprüfung scheint es, dass dies die ursprüngliche Frage besser beantworten sollte. – ThomasK

Verwandte Themen