html - CSS 网格正确对齐

Question

试图在我的用户界面中实现上述结构。一张大图和下面的缩略图。 我正在使用 grid components为了它。代码:

<div class="row">
    <div class="col">
        <img url="bigPic"></img>
    </div>
</div>
<div class="row">
    <div class="col" ng-repeat="pic in Pics">
        <img url="pic"></img>
    </div>
</div>

现在我想从Pics 中删除图片。这就是我使用以下代码引入徽章的原因:

<div class="row">
    <div class="col">
        <img url="bigPic"></img>
    </div>
</div>
<div class="row">
    <div class="col" ng-repeat="pic in Pics">
        <img url="pic"></img>
        <span class="badge badge-assertive picture-thumbnail-badge"
                                  on-tap="removePic($index)">
            <i class="icon ion-ios7-close-empty"></i>
        </span>
    </div>
</div>

结果如下(使用 css 类移动左上角的徽章):

.picture-thumbnail-badge{
  position: relative;
  top:-60px;
  right:65px;
  z-index: 100;
}

这里的问题是缩略图不再在大图片下方居中。我想 flexbox 以某种方式考虑了徽章的大小。 我现在很明显的问题是:我怎样才能在对齐计算中忽略徽章并使这个缩略图行居中，即使有徽章？ 提前致谢。

Answer 1

您需要将 .picture-thumbnail-badge 移出流程。为此，您可以使用 position:absolute;而不是 position:relative; :

.picture-thumbnail-badge{
  position: absolute;
  top:-60px;
  right:65px;
  z-index: 100;
}

(注意父级需要用position:relative;定位)