调整窗口大小的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宽度

回答

相关问题