プッシュリボンdivを画面の右端にプッシュ

リボンを画面の右端に表示する特定の要件を持つサイトを設計しています。私はブートストラップを使用しています。リボンはブートストラップコンテナにあり、行と列を2つの要素に均等に分けて、私はデザイナーのテキストを正確にそのままにしておきたい。どのように画像の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を画面の右端にプッシュ

答えて

関連する問題