html - Codepen 上的图片库出现问题

Question

我正在尝试用 html 和 css 做我的第一个元素，但遇到了一些麻烦。我正在练习使用 codepen，我的画廊进展顺利，但我正在尝试添加最后一行图像，它似乎把一切都搞砸了，我不知道为什么。有人介意看一看吗？

这是 link

出于某种原因，当我尝试添加那个棋盘时，一切都变糟了。

我在这方面还很陌生，所以我期待学到很多东西。

谢谢。

  [1]: http://codepen.io/zenturtle/pen/ezDGC

Answer 1

边距是导致问题的原因。当您使用边距来定位元素时，您也会将元素推到它周围。

一种解决方案是使用:position: relative然后使用定位属性:top , bottom , left , right

例子:

#chess {
    position: relative;
    left: 555px;
}

另一个解决方案是使用 position: absolute .

1. 地点position: relative在 <div id="perimeter"> 上
2. 地点position: absolute在每个 <img>
3. 定位每个<img>在 <div id="perimeter"> 中您想要的位置

例子:

 #chess {
     position: absolute;
     bottom: 122px;
     right: 230px;
 }

这就是您将国际象棋图像放置在您想要的位置的方式。

CSS Tricks 有一个很好的 article解释 position属性(property)。