使带状附加块看起来大小相同

Question

我正在使用引导网格系统来创建＆＃34;块＆＃34;在我的页面上有不同的大小。其中一些需要一个功能区（例如＆＃34;新的＆＃34;产品）。问题是，我创建色带的方式（我知道如何做的唯一方法）意味着我必须包装块的内容并在盒子周围创建一个填充，因此色带可以＆＃34;环绕＆＃ 34;它并创造了所需的幻觉。

然而，这也意味着盒子比应该的盒子小一些，即我必须用于色带的填充物。

以下是当前显示方式的演示：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>

截图

如您所见，可见的左边框未对齐。从技术上讲，这是非常合乎逻辑的。但是，从用户的角度来看，它只是看起来＆＃34; off＆＃34;。

如何使这项工作成功，以便带带的块的左边框与块的左边框对齐而不带功能区？

Answer 1

在相对定位后向左移动内部块并稍微增加宽度，并将色带向左移动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%;
}

编辑

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

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

Answer 2

已更新并正常工作

尝试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 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

我建议你简单一点，不需要为＃34;新建一个新的html元素！＆＃34;徽章，只需用文字制作图像：

并创建一个伪元素：

＆＃13;

＆＃13;

.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');
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;