html - 将功能区div推到屏幕的右边缘

我正在设计一个有特殊要求的站点，以便在屏幕的最右边显示功能区，我使用的是Bootstrap，功能区位于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>

最佳答案

您必须将功能区移到容器外部，以成为body的子级。
比您可以将其定位为绝对。

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

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

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

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

最后一个选择是使用负值并使用calc函数。
这不是很容易，但是可行。
您是否有指向您网站的链接？如果您愿意的话，我可以看看。

关于html - 将功能区div推到屏幕的右边缘，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40999026/