html - 如何让div占据最上面和最左边的位置

Question

我正在尝试将分成多个较小图像的图像拼接在一起。我想如果我只是 float 所有剩下的东西，只要我以正确的顺序声明 div，它们就会很好地结合在一起。完整图像的宽度为 999 像素，高度为 471 像素，因此我的第一次尝试是使用以下 CSS:

#ImageWrapper{
  background-color: #efefef;
  width: 999px;
  height: 471px;
  float:left;
}

#div1{
  background-color: #777;
  width: 258px;
  height: 100px;
  float:left;
}

#div2{
  background-color: #999;
  width: 678px;
  height: 37px;
  float: left;
}

#div3{
  background-color: #bbb;
  width: 63px;
  height: 471px;
  float: left;
}

#div4{
  background-color: #ddd;
  width: 18px;
  height: 18px;
  float: left;
}

<div id="ImageWrapper">
  <div id="div1">1</div>
  <div id="div2">2</div>
  <div id="div3">3</div>
  <div id="div4">4</div>
</div>

然后我只是按顺序在包装器 div 中声明 div，并希望它最终看起来像这样:https://imgur.com/a/d92ig .分区 1-3 有效，但分区 4 无效。我试着弄乱 position 属性，但这也无济于事。有什么办法可以轻松解决这个问题，并让它像我的照片那样工作吗？最终我将有足够的 div 来填充整个包装器 div，我只是想边做边测试。

Answer 1

这是一种方法:

#div4{
  width: 18px;
  height: 18px;
  float: right;
  background-color:#b2f7;
  position:absolute;
  margin-top:37px;
  margin-left:258px;
}

所以只需更改 position:absolute 然后使用 div 1 和 div 2 的高度和宽度就可以移动到一个位置。

JSFiddle is here