0

シングル イメージ バナーの左側にロゴがあり、右側に大きなロゴがあるサイトを継承しました。

バナーを、bannerLeft、bannerRight、および bannerMiddle というスライスの 3 つに切り刻みました。

ブラウザの幅に応じて中央のバナーが伸縮するように 3 つを配置したいのですが、中央のバナーの幅が 0 の場合、他の 2 つが折り返されないように最小幅が必要です。

左のバナー画像は幅 100 ピクセル、右は幅 420 ピクセル、中央は幅 10 ピクセルですが、引き伸ばす必要があります

ここにHTMLがあります

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div id="bannerDiv">
      <div id="bannerLeft"><img src="images/bannerLeft.png"></div>
      <div id="bannerMiddle"><img src="images/bannerMiddle.png"></div>
      <div id="bannerRight"><img src="images/bannerRight.png"></div>
    </div>
  </body>
</html>

残念ながら機能しないcss

#bannerRight { float:left }
#bannerRight { float:right }
#bannerMiddle { width:100% }

これはよくある質問だと思いますが、これを行うための最良の方法を見つけるための検索引数を見つけることができなかったため、進行状況を少し損なうことを知っているという問題もあります。私が見つけたすべての引き戸は、順序付けられていないリストのボタンです

質問:

  1. 3 つの画像を 1 つの画像のように見せるにはどうすればよいですか (実際に SO で行っているように)
  2. バナーのサイズが左右の合計幅よりも小さくなるのを防ぐにはどうすればよいですか

ここに3つの画像があります：

バナー左バナー中バナー右

実際、repeat-xの場合、真ん中のものは醜いので、ここに別のものがあります

ここに画像の説明を入力

アップデート

これではうまくいきません - 中央のバナーを 100% にすると、右側のバナーからはみ出してしまいます 右側のバナーは角が丸くなっているので、私の画像を使用して更新してください!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <style type="text/css">

        #bannerDiv {min-height:98px; min-width:520px; position:relative;display:block;width:100%;padding:1px;}
        #bannerLeft {  display:block;position:absolute;top:0;left:0px;width:100px; height:98px}
        #bannerRight { display:block;position:absolute;top:0;right:-10px;width:420px; height:98px}
        #bannerMiddle { min-height:98px; display:block;position:absolute;top:0;left:100px; background-image:url(images/bannerMiddle.png)}
    </style>
  </head>
  <body>
    <div id="bannerDiv">
      <div id="bannerLeft"><img src="images/bannerLeft.png" style="height:98px"></div>
      <div id="bannerMiddle"></div>
      <div id="bannerRight"><img src="images/bannerRight.png"></div>
    </div>
  </body>
</html>

更新 2

これは今のところ機能します

<div id="bannerDiv"><img 
  id="bannerLeft" src="images/bannerLeft.png" /><img 
  id="bannerMiddle" src="images/bannerMiddle.png" /><img 
  id="bannerRight" src="images/bannerRight.png" /></div>

function resizeIt() {
  $("#bannerDiv").width("100%");
  var leftWidth = $("#bannerLeft").width(), 
      rightWidth = $("#bannerRight").width(),
      newWidth=$("#bannerDiv").width()-(leftWidth+rightWidth);
  $("#bannerMiddle").width(newWidth).height(98);
}
$(document).ready(function() {
  resizeIt();
  $(window).on("resize",resizeIt);
});
4

1 に答える 1

0 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <style type="text/css">
        div { min-height:20px;}
        #bannerDiv {position:relative;display:block;width:100%;padding:1px;overflow:hidden;}
        #bannerLeft {  background-color:black;display:block;position:absolute;top:0;left:0px;width:20px;}
        #bannerRight {  background-color:green;display:block;position:absolute;top:0;right:-1px;width:20px;}
        #bannerMiddle { background-color:purple;display:block;position:absolute;top:0;left:20px;width:100%;}
    </style>
  </head>
  <body>
    <div id="bannerDiv">
      <div id="bannerLeft"><img src="images/bannerLeft.png"></div>
      <div id="bannerMiddle"></div>
      <div id="bannerRight"><img src="images/bannerRight.png"></div>
    </div>
  </body>
</html>
于 2012-11-06T14:52:05.393 に答える