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正確對齊

回答

相關問題