使带状块相似大小

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>