在一些定义好的坐标系下在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屏幕上的不同位置放置多个图像

回答

相关问题