0

我继承了一个网站，其中单个图像横幅在左侧有一个徽标，在右侧有一个更大的徽标。

我已将横幅切成三个，bannerLeft、bannerRight 和一个名为bannerMiddle 的切片。

我想定位这三个，以便中间横幅会根据浏览器宽度拉伸和收缩，但是我需要有一个最小宽度，所以当中间横幅的宽度为 0 时，其他两个不换行。

左边的banner图片是100px宽，右边是420px宽，中间是10px宽，但需要拉伸

这是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. 我如何让这三张图片看起来像一张图片（就像他们现在在 SO 上所做的那样）
  2. 如何阻止横幅调整大小小于左右的组合宽度

这是3张图片：

横幅左横幅中间横幅右

实际上，如果重复-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 回答