0
我正在设计一个网站,该屏幕具有在屏幕最右侧显示功能区的特定要求,我使用Bootstrap并将功能区放在引导容器中,在这两个元素之间平等地划分列,我希望设计器文本能够保持在原来的位置,因为我试图保持它的响应性,并在移动时包含它。如何将图像div(色带)一直推到最靠外的容器外部。将丝带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>
我会试试,而且我的雇主在开发环境中还没有链接,但让我试试看。 –