Question

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

我把横幅切成了三个，bannerLeft，bannerRight和一个名为bannerMiddle的切片。

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

左横幅图像宽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% }

我确信这是一个常见问题解答，但也是一个知道有点伤害我的进展的问题，因为我无法找到搜索参数来找到最佳方法。我找到的所有推拉门都是无序列表中的按钮

问题：

如何让这三幅图像看起来像一张图像（就像他们现在实际上在SO一样）
如何阻止横幅调整为小于左右组合宽度

以下是3张图片：

bannerLeft bannerMiddle bannerRight

实际上，如果重复x，那么中间的那个将是丑陋的，所以这里是另一个

enter image description here

更新

这不太有效 - 如果我将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);
});

Answer 1

<!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>

最小宽度的滑门横幅

1 个答案: