借此简单的例子和打开:HTML/CSS:为什么身体不能伸展到其内容?
<html>
<body style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg);background-repeat: no-repeat; background-position: top center;">
<div style="width: 8000px; border: 3px solid red;">Demo</div>
</body>
</html>
的页面是由使得主体具有顶为中心的背景图象和溢出窗口边界上,所以有水平滚动(如果有一个容纳元件显示器宽度超过8000像素,那么你真的很酷,请将窗口缩小并刷新)。
问题是由于某种原因,<body>
不能拉伸以包含<div>
。它只是保持与视口相同的宽度,并且<div>
会溢出。这反过来导致背景居中在错误的地方并将其裁剪到视口的大小。当你向右滚动时很难看。
我已经找到了解决这个问题的方法,但是我想知道为什么这样呢?它在浏览器中似乎也是一致的。但在我看来,这是非常直观的,基本上很简单错误。容器元素应该足够大以容纳它的孩子 - 除非它们完全被定位,在这种情况下它们不参与布局计算。
嘿。回到这2年后,我正在寻找你说你找到的同样的解决方案。 Bobince的答案并没有帮助,非常多..(浮动唯一的选择?) – SoreThumb 2012-08-29 04:04:21
我仍然使用浮动。看看这里:http://www.drowtales.com – 2012-08-29 11:24:25