將絲帶div推到屏幕的右邊緣

我正在設計一個網站，該屏幕具有在屏幕最右側顯示功能區的特定要求，我使用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>

來源

2016-12-06 Psy Chotic

呦你必須將容器外的色帶移動到body的子區域。比你可以絕對定位。

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

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

如果您不能將色帶移動到容器外部，則必須使用位置固定。不幸的是，功能區將滾動您的頁面。

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

最後一個選項是使用負值並使用calc函數。這不是很容易，但可行。你有鏈接到你的網站？如果你願意的話，我可以對它進行嘲弄。

來源

2016-12-06 15:35:45 marcobiedermann

我會試試，而且我的僱主在開發環境中還沒有鏈接，但讓我試試看。 –

將絲帶div推到屏幕的右邊緣

回答

相關問題