最小寬度的滑動門橫幅

我繼承了一個網站，其中單幅圖像橫幅的左側有一個徽標，右側有一個更大的徽標。最小寬度的滑動門橫幅

我已經把旗幟切成三條，bannerLeft，bannerRight和一個叫做bannerMiddle的切片。

我想定位三個，所以中間橫幅會根據瀏覽器寬度拉伸和收縮，但是我需要有一個最小寬度，所以當中間橫幅寬度爲0時，另外兩個不會打包。

左橫幅圖片100像素寬，右邊是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

UPDATE

這完全不是那麼回事 - 如果我將中間橫幅100％溢出右側橫幅請使用我的i更新法師，因爲正確的一個圓角！

<!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); 
});

來源

2012-11-06 mplungjan

<!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-06 14:52:05

我的回答是針對一個獨立的樣本解決了定位問題，所以你應該能夠調整它（寬度/高度，偏移）以滿足您的需求。 –

我沒有看到我的中間圖像。這是中間div的背景圖像嗎？ – mplungjan

是的，你需要添加它 - 樣本只是給你定位的元素，你可以建立。 –

最小寬度的滑動門橫幅

回答

相關問題