調整窗口大小的div寬度

對於我正在構建的站點，徽標具有居中的字體，兩個白線從窗口邊緣脫落並延伸到窗口的邊緣，而不管窗口大小如何。調整窗口大小的div寬度

我發現最簡單的方法就是讓JavaScript（通過jquery）在文檔加載或窗口大小調整時調整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); 
}

一切正常......當窗口被加載或調整大小時，酒吧完美地與徽標對齊。我遇到的問題是，在窗口大小設置完成之前，通過拖動線條跳躍來調整窗口的大小。換句話說，不是一個順利的調整大小。

有沒有辦法避免這種情況？

來源

2011-04-08 birarda

讓我猜...你使用IE嗎？你在FF試過嗎？ – Patrick 2011-04-08 15:47:13

我使用了一個debounce插件...您使用的瀏覽器是什麼？它可能經常發送調整大小的事件，以至於代碼太快。試試這個大小http://benalman.com/code/projects/jquery-throttle-debounce/docs/files/jquery-ba-throttle-debounce-js.html – jcolebrand 2011-04-08 15:48:05

@Patrick它在這兩個webkit（ Safari，Chrome）和Firefox。 – birarda 2011-04-08 15:58:51

爲什麼你不使用100％寬的白色外部div與標誌居中的內部div？

這種方式，你可以編碼它只有白衣的CSS和完全避免JavaScript。

你可以找到我的意思here的一個例子。

來源

2011-04-08 15:52:00 Albireo

嘗試過，但問題在於左右兩側的條紋沒有一致的寬度或一致的百分比寬度。 – birarda 2011-04-08 15:54:06

@birarda：你不應該在意條紋的寬度是多少：如果你將DIV設置爲100％寬度，它將伸展以填充它的容器，如果你將內部DIV分散，它將自動定位（它應該如果我沒有記錯的話，可以通過'margin-left：auto; margin-right：auto'完成。只有徽標不居中時，您纔會遇到問題。也許我誤解了你的問題，你有沒有一個可行的例子？ – Albireo 2011-04-08 15:57:12

@Albireo還沒有作爲一個例子。我想我試着用寬度爲100％的包裝div來描述你的內容，然後標識在頁面中居中。問題是條紋沒有穿過整個頁面......左邊有一個條紋，右邊有一個條紋，所以它更多的是停止它，導致問題。 – birarda 2011-04-08 16:00:17

嘗試使用這種伎倆..讓厚厚的邊框和地方的標誌外塊的這裏面有負的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; }

來源

2011-04-08 19:33:02

調整窗口大小的div寬度

回答

相關問題