html - 屏幕尺寸 > 容器尺寸时出现奇怪的宽度问题

标签 html css width margin

我创建了一个网页,该网页的顶部有两个栏(用于导航和 Twitter 更新)。 我是如何做到这一点的,方法是为每个栏创建两个 div,一个在另一个里面。这样做的原因是因为我希望栏在整个页面上缩放,但内容被限制为固定宽度。

现在这“正常”工作正常,但是当浏览器屏幕宽度小于子 div 宽度时,它会溢出到父 div 之外。

我在这里有一个页面的现场演示: http://tinyurl.com/7qj3pzs

编辑: 我已经将最小宽度添加到父 div,似乎已经解决了这个问题 :D

最佳答案

在父级div上,需要设置如下CSS:

#parentDiv {
    overflow: hidden;
}

假设这是 HTML:

<div id="parentDiv">
   <div id="childDiv"></div>
</div>

我还碰巧注意到,在“图表”部分,您将一堆 JQuery 动画弹出到动画队列中。如果您像这样将 .stop() 方法链接到动画中,它将防止动画过载队列和动画,即使在鼠标消失后也是如此:

$('a').stop().animate();

关于html - 屏幕尺寸 > 容器尺寸时出现奇怪的宽度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11165256/

相关文章:

php - Css 和不同的浏览器问题

html - 在线下方创建一个 hr 径向渐变

html - 调整浏览器大小时 Div 宽度 100% 不起作用

WPF 列表框固定宽度

jquery - fancybox 宽度不适用

Javascript 获取选定值返回 'undefined'

html - 使用均匀空间调整大小后居中 div?

javascript - 子 visibility 影响父 visibility

html - 如何在中心对齐我的 CSS 下拉菜单?

jquery - 通过 jquery 类更改应用动画