1

我正在努力创建一个只有水平滚动的网站。请看一下这个演示。我的问题是当我调整浏览器的大小时，内容（浅黄色框内的段落）不会重新定位。我希望该段位于黄色环段上方。我怎样才能做到这一点？

下面是我的代码。

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body>

<div id="container">

<img id="backimage" src="images/rings.png" />

<div id="info">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubia
</p>
</div><!-- end of info -->


</div><!-- end of container -->

</body>
</html>

CSS

a { text-decoration:none; }

li {list-style-type:none; }

body { overflow-y:hidden; }

#container {
    position:absolute;
    height:100%;
    width:10000px;
    background-color:#FC9;
}

#info {
    position:absolute;
    width:200px;
    height:220px;
    background-color:#FFC;
    top:180px;
    left:250px;
}

#backimage {
    position:absolute;
    height:100%;
    background-size:cover;
    bottom:0;
}

我尝试将#info的位置设置为，relative但是当我这样做时，它会从页面中消失。

4

2 回答 2

0

您将每个位置定义为绝对位置。这不是一个好的解决方案。相反，您应该使用相对布局。它们可能有点复杂，而且不像“免费”那样“免费”，但它们确实解决了大部分问题。从您的 HTML 中删除 backImage 和容器并执行以下操作：

a { text-decoration:none; }

li {list-style-type:none; }

body { 
    overflow-y:hidden; 
    background:url(images/rings.png);
    background-color:#FC9;
}

#container { //body is the container. You dont need something like this in this case.
}

#info {
    background-color:#FFC;

    //width and height are dynamic to the size of content

    margin-top:180px; //You just set the margin (outer gap) instead of the position.
    margin-left:250px;
}

#backimage { //You don't need a back-image if you use background:url(...) in body
}

如果窗口较小，则希望框的外部间隙变小，请使用带边距的百分比。

如果要限制信息 div 的大小，请使用 max-width:xyz;

正如我在您对另一个答案的评论中读到的那样，您希望 div 位于背景的特定部分。您可以使用背景位置来实现这一点。

于 2013-01-28T15:46:20.900 回答
0

您希望内容发生什么？因为使用当前参数，位置是相对还是绝对无关紧要，它将保持从背景图像左上角向下 180px 和 250px ......而且它的大小也不会改变。

于 2013-01-28T15:16:08.017 回答