Question

我正在构建一个博客，并且有一个大的标题图像，目标是填充屏幕顶部（除非在大于1500px的显示器上） - 但滚动条远远超出标题内容并显示空白区域。

在Ipad上查看时，它会缩小并显示内容侧面的额外空间。为什么宽度明显大于图像？

这是HTML和CSS：

<?php wp_head(); ?>
</head>

<div id="container" class="group">
<div class="outer"><div class="inner"><img src="http://theshalomimaginative.com/weeds/wp-    content/themes/journalist/images/longtop.jpg"/></div></div>

div.inner img { position: relative; left:-50%; }
div.outer {width: 900px; margin: 0 auto; overflow: visible;}
div.inner {display: inline-block; position:relative; right: -50%;}

此代码将标题集中在容器之外，我希望除非显示器太大，否则它总是会填满屏幕顶部。任何想法为什么它会在图像之外创建额外的滚动空间？

感谢。

Answer 1

class="inner"占据空间的元素。它从里面的图像中获取它的大小，但是然后你使用相对定位来显示元素左边的图像。

如果您想使用该方法对元素进行居中，请在其周围放置一个div，其中包含overflow: hidden;且未设置宽度，以便它使用默认width: auto，这将使其占用所有可用的宽度。

Answer 2

试试这个

#container {
width: 911px;
margin: 0 auto;
position: relative;
padding: 0 0 0 140px;
overflow: hidden;
}

Answer 3

http://jsfiddle.net/pWDrD/

您将看到是否增加了小提琴盒的宽度，然后图像会自动增加宽度，而不会有任何滚动条。你明白我是怎么做到的吗？让我知道。如果不是我会解释。简单地说，当你想要一个图像转到显示器的100％时，你需要将它放入一个宽度为100％和自动边距的容器中，而不是固定的宽度，根本没有位置。

Answer 4

我会将它们拉出容器。将div.outer移动到标记中的div.container上方，删除div.outer，div.inner的所有css，然后添加text-align：center;到div.outer并完全删除div.inner。

为什么水平滚动条远远超出内容？

4 个答案: