在一些定義好的座標系下在CSS屏幕上的不同位置放置多個圖像

這裏是一組四個圖像放置在屏幕上的不同位置我已經提到了代碼中的座標。實際上，我希望我的圖像左上角的座標位置與代碼中相同，但它不能正常工作。所以你可以幫忙找出錯誤嗎？在一些定義好的座標系下在CSS屏幕上的不同位置放置多個圖像

<!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>

來源

2016-05-14 Drishti Tulsi

你的CSS第4行有一個部分註釋（'/ * pos'）。你應該完成（'* /'）或刪除它。 –

哎它偶然來了！ –

去這個問題的最好方法是使用一個網格，從一個CSS框架（引導，基礎等）。對於這種類型的定位，不建議使用浮點數。如果你不想使用一個CSS框架，你可以使用一個表。

<table> 
    <tr> 
    <td>Image 1</td> 
    <td>Image 2</td> 
    </tr> 
    <tr> 
    <td>Image 3</td> 
    <td>Image 4</td> 
    </tr> 
</table>

您可以使用此結構輕鬆地重新定位所有內容。實現響應式設計將更容易。

來源

2016-05-14 21:09:29 ThomasK

這樣我只需要將表格的頂部座標正確定位！ –

使用絕對定位是。在你的CSS添加位置：絕對;頂部：SomeNumberpx;左：someNumber像。 – ThomasK

經過進一步審查，似乎這應該更好地回答原來的問題。 – ThomasK

在一些定義好的座標系下在CSS屏幕上的不同位置放置多個圖像

回答

相關問題