Question

我正在设计一个网站，它具有在屏幕最右侧显示功能区的特定要求，我正在使用Bootstrap，并且功能区位于引导容器中，行和列在两个元素之间平均分配，我希望Designer Text能够保持原样，因为我想在移动时保持响应和包含。如何将图像div（色带）一直推到最右边的容器外面。

我在下面列出了我正在使用的图片。我可能做错了，因为我的设计技巧很小。

我希望它看起来像这样

以下是代码：

.bookmarkRibbon {
  /*width:100%;*/ 
  height: 0;
  width: 100%;
  border-bottom: 22px solid #ff5750;
  border-top: 22px solid #ff5750;
  border-left: 20px solid transparent;
  position: absolute;
  margin-right: -3000px;
}

.bookmarkRibbon a {
  display: block;
  padding: 0;
  position: relative;
  /* allows us to position our pseudo-elements properly */

  background: #ff5750;
  overflow: visible;
  /*height: -18px;*/
  margin-left: 29px;
  margin-top: -18px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: x-large;      
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-7">                    
      <h1 ID="lblCategoryName" runat="server"></h1>                    
    </div> 
    <div class="col-xs-5">
      <div class="bookmarkRibbon" id="discountBannerContainer" runat="server" style="margin-top: 15px">
        <a href="/pure-css-ribbon-banner.html#" id="ribbon">20% OFF ADDRESS STAMPS</a><p class="mine">CODE: STAMP 20</p>
      </div>                                     
    </div>          
  </div> 
</div>

Answer 1

您必须将容器外的功能区移动为body的子项。比你可以绝对定位。

<body>
  <div class="ribbon"></div>
</body

.ribbon {
  position: absolute;
  top: 300px;
  right: 0;
}

如果无法将色带移到容器外，则必须使用固定位置。不幸的是，功能区将随页面一起滚动。

.ribbon {
  position: fixed;
  top: 300px;
  right: 0;
}

最后一个选项是使用负值并使用calc函数。这不是很容易，但可行。你有自己网站的链接吗？如果你愿意的话我可以拿一个懒人。

将色带div推到屏幕的右边缘

1 个答案: