CSS Grids正确对齐

尝试在我的UI中实现上述结构。它下面的大图和缩略图。我正在使用grid components。代码：CSS Grids正确对齐

<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会以某种方式考虑徽章的大小。我现在明显的问题是：如何忽略对齐计算中的徽章，并使缩略图行居中，即使使用徽章？在此先感谢。

来源

2014-12-07 Clawish

尝试'的位置是：绝对的;'而不是'位置：相对;'在'.picture-thumbnail-badge'上 – 2014-12-07 17:45:21

这个工作（当调整顶部和底部值时）！谢谢。给出正确的答案，我会投票。 – Clawish 2014-12-07 17:53:41

您需要将.picture-thumbnail-badge移出流程。对于这一点，你可以用position:absolute;代替position:relative;：

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

（请注意，父母需要被定位position:relative;）

来源

2014-12-07 17:57:53

CSS Grids正确对齐

回答

相关问题