使帶狀塊相似大小

Question

我使用引導網格系統在頁面上創建不同大小的「塊」。其中一些需要功能區（例如「新」產品）。問題是，我創建絲帶的方式（我知道如何去做）意味着我必須包裹塊的內容並在箱子周圍創建填充，以便功能區可以「環繞」它並創建所需的幻覺。

但是，這也意味着箱子比應該是小略小，即我必須申請功能區的填充。

這裏是它的外觀目前演示：fiddleLink

CSS

.row { 
    padding: 5px; 
    background: #efefef; 
} 

.block { 
    position: relative; 
    padding: 5px; 
} 

.block-inner { 
    background: #fcc; 
    padding: 15px; 
} 

div.ribbon { 
    z-index: 1; 
    position: absolute; 
    top: 2px; 
    left: 0; 
    width: 88px; 
    height: 86px; 
} 

div#no-ribbon { 
    background: #ccf; 
} 

div.ribbon-text { 
    position: absolute; 
    top: 25px; 
    left: -15px; 
    width: 100px; 
    height: 20px; 

    text-align: center; 
    font-style: italic; 
    font-size: 16px; 
    color: white; 

    transform: rotate(-45deg); 
} 

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-3 block"> 
      <div class="ribbon"> 
       <div class="ribbon-text">New!</div> 
      </div> 
      <div class="block-inner"> 
       <p>Some awesome text and imagery, whatever</p> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-3" id="no-ribbon"> 
      <p>A block with its "actual" size</p> 
     </div> 
    </div> 
</div> 

截圖

正如你所看到的，可見光左邊框不對齊。當然，技術上這是非常合乎邏輯的。但是，從用戶角度來看，它只是「關閉」。

我怎樣才能使這項工作，使塊與帶狀線與塊的左邊框沒有絲帶左邊框？

Answer 1

已更新且正在工作

嘗試margin-left: -5px;至該塊。

.block-inner { 
    background: #fcc; 
    padding: 15px; 
    /* Add this */ 
    margin-left: -5px; 
} 

div.ribbon { 
    margin-left: -5px; 
} 

div.ribbon + .block-inner { 
    margin-right: -5px; 
} 

前瞻：

小提琴：https://jsfiddle.net/kpopsj5x/5/

Answer 2

移動並主張它相對的，並且增加了寬度的位，以及5個像素移動至色帶向左後留下的內部塊：

.block-inner { 
    background: #fcc; 
    padding: 15px; 

    // newly added css 
    position: relative; 
    left:-5px; 

    //Also increase the width of the inner block 
    width:96.7%; 
} 

EDIT

div.ribbon { 
     z-index: 1; 
     position: absolute; 
     top: 2px; 

     // move the ribbon also -5px 
     left: -5px; 
     width: 88px; 
     height: 86px; 
    } 

Answer 3

您需要調整您的HTML和CSS代碼位。

#no-ribbon .block-inner { 
    background: #ccf none repeat scroll 0 0; 
} 

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-3 block"> 
     <div class="ribbon"> 
     <div class="ribbon-text">New!</div> 
     </div> 
     <div class="block-inner"> 
     <p>Some awesome text and imagery, whatever</p> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-3 block" id="no-ribbon"> 
     <div class="block-inner"> 
     <p>A block with its "actual" size</p> 
     </div> 

    </div> 
    </div> 
</div> 

JSFiddle

Answer 4

我建議你把它簡單，沒有必要把新的HTML元素的 「新」！徽章，只是做文字圖片：

，並創建一個僞元素：

.row { 
 
    padding: 5px; 
 
    background: #efefef; 
 
} 
 
.block-inner { 
 
    background: none white; 
 
} 
 
.block { 
 
    position: relative; 
 
    padding: 5px; 
 
} 
 
.block-inner { 
 
    background: #fcc; 
 
    padding: 15px; 
 
} 
 
.badge-new::before { 
 
    z-index: 1; 
 
    position: absolute; 
 
    content: ' '; 
 
    top: -3px; 
 
    left: 10px; 
 
    width: 88px; 
 
    height: 86px; 
 
    background-image: url('http://i.stack.imgur.com/quoTy.png'); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-3"> 
 
      <div class="block-inner badge-new"> 
 
       <p>Some awesome text and imagery, whatever</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-3"> 
 
      <div class="block-inner"> 
 
       <p>A block with its "actual" size</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>