在窗口上調整div的寬度

Question

對於我現在正在構建的站點，徽標具有居中的字體，其中有兩條白線顯示並延伸到窗口的邊緣，而不管窗口的大小如何。

我發現最簡單的方法是在加載文檔或調整窗口大小時（通過jquery）獲取javascript來調整div的大小。 我的代碼如下所示。

$(document).ready(cssFix);
$(document).ready(stripeSize);
$(window).resize(stripeSize);

function cssFix() {
     $('#leftstripe').css({position: 'absolute', top: '84px'});
     $('#rightstripe').css({position: 'absolute', top: '35px'});
}

function stripeSize() {
     $('#leftstripe').width($('#logo').offset().left + 110);
     rightOffset = $(window).width() - ($('#logo').offset().left + $('#logo').outerWidth());
     $('#rightstripe').width(rightOffset + 183);
}

一切正常……在加載窗口或調整窗口大小時，條形與徽標完美對齊。 我遇到的問題是，在設置了窗口大小之后，在拖動下來之前通過拖動跳線來調整窗口大小。 換句話說，調整大小無法順利進行。

反正有避免這種情況嗎？

Answer 1

為什么不使用帶有徽標的居中內部div的100％寬白色外部div？

這樣，您可以只使用CSS編寫代碼，而完全避免使用JavaScript。

您可以在此處找到我的意思的示例。

Answer 2

嘗試使用這種伎倆..讓厚厚的邊框和地方標志這里面有負的margin-top外塊： http://jsfiddle.net/Qf2sT/

的HTML：

<div class='lines'><div id='logo'><img src='http://www.google.com.ua/images/logos/ps_logo2.png' /></div></div>

CSS：

body { background: black }
.lines { width: 100%; border-top: 10px solid white; margin-top: 60px }
.lines #logo { margin: 0 auto; width: 364px; margin-top: -60px; }