在CSS中将多个图像放置在屏幕上的不同位置上的某个定义的坐标

Question

这是一组四个图像，放置在屏幕上的不同位置，我在代码中提到了坐标。实际上，我希望我的图像的左上角坐标定位为在code.But中它不工作。所以你能帮我找出错误吗？

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

	display:inline;
	positon:absolute;
	top:360px;
	left:690px;
	
	}
#imagegroup4{
	display:inline;
	positon:absolute;
	top:360px;
	left:1000px;
	
	}
</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>

​

Answer 1

最好的方法是使用css框架(Bootstrap，foundation等)中的网格。对于这种类型的定位，不建议使用Float。如果你不想使用css框架，你可以使用表格。

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

您可以使用此结构轻松地重新定位所有内容。而且实现响应式设计也会容易得多。