Question

对于我现在正在建造的网站，徽标有一个居中的字体，两条白线都会脱落并延伸到窗口的边缘，无论窗口大小如何。

我发现最简单的方法是在加载文档或调整窗口大小时，通过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);
}

一切正常......当窗口加载或调整大小时，条形图与徽标完美对齐。我遇到的问题是，在设置窗口大小后，通过拖动线类型跳转来调整窗口大小之前调整窗口大小。换句话说，不是顺利调整大小。

无论如何都要避免这种情况吗？

Answer 1

为什么不使用带有徽标的居中内部div的100％宽的白色外部div？

通过这种方式，您只能使用CSS编写代码并完全避免使用JavaScript。

您可以找到我的意思here的例子。

Answer 2

尝试使用这种技巧..制作一个带有粗边框的外部块，并在其内部放置带有负边距的徽标： 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; }

在窗口调整大小时调整div宽度

2 个答案: