CSSビューポートの変更に基づいて画像の横にあるボタンの位置合わせ

Question

私はバナーdivの画像の隣にボタンがあります。イメージサイズは1024 x 83です。通常のビューでページを表示すると、ボタンの横にボタンが並んでいます。しかし、ビューポートを1024ピクセル以下に調整すると、画像ファイルはボタンの下に落ちますが、適切に縮尺されます。私はボタンの下に落ちることなく、ボタンの横に画像を保持したいと思います。ここに私のHTMLは次のとおりです。ここで

<div id="banner-top"> 
    <a class="btn btn-danger" id="back-button" role="button">Back</a> 
    <img class="banner-image" src="img/banner.png"> 
</div> 

は私の既存のCSSです：

#banner-top { 
    height: 83px; 
    background-color: #CCC; 
} 

.btn-danger { 
    color: #fff; 
    background-color: #d9534f; 
    border-color: #d43f3a; 
} 
.banner-image { 
    max-width: 100%; 
    height: auto; 
    width: auto; 
    } 

私はフロートを追加しようとしました：左; .btn危険とフロートへ：右。 .bannerイメージには、喜びはありません。次に、display：inline-blockを追加しました。両方のクラスにまだ喜びはありません。私は絶対配置を追加しましたが、まだ成功しませんでした。

.banner-image { 
    max-width: 100%; 
    height: auto; 
    width: auto; 
    position: absolute; 
    margin-left: 40px; 
    } 

と絶対位置の両方：

Answer 1

は、あなたがボタンを一定の幅

.btn-danger { 
    width: 40px; 
    color: #fff; 
    background-color: #d9534f; 
    border-color: #d43f3a; 
    position: absolute; 
} 

とバナーのmargin-leftボタンの幅を与えることを試みました。コードを変更することなく動作するはずです。

JSFiddle例：https://jsfiddle.net/g7ajkp9r/

何の画像は/プレースホルダイメージが正常に動作しない、時々から来るサイト...

Answer 2

あなたはこのようなものを使用することができます表示されない場合はフィドルを再起動してみてください...

<div id="banner-top"> 
    <a class="btn btn-danger" id="back-button" role="button">Back</a> 
    <img class="banner-image" src="http://lorempixel.com/1024/83/sports/Dummy-Text"> 
</div> 

<style> 
    #banner-top { 
    height: 83px; 
    background-color: #CCC; 
    } 

    .btn-danger { 
    width: 40px; 
    color: #fff; 
    background-color: #d9534f; 
    border-color: #d43f3a; 
    position: absolute; 
    } 
    .banner-image { 
    max-width: calc(100% - 48px); 
    height: auto; 
    width: auto; 
    position: absolute; 
    left: 40px; 
    } 

</style> 

これは正常に動作します。