Question

我很想创建一个只有水平滚动的网站。请看一下这个demo。我的问题是当我调整浏览器大小时，内容（淡黄色框内的段落）不会重新定位。我希望该段落位于黄色环段之上。我怎么能这样做？

以下是我的代码。

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，但当我这样做时，它会从页面中消失。

Answer 1

您希望内容发生什么？因为当前参数并不重要，如果位置是相对的或绝对的，它将保持180px向下和250px从backimage左上角...也是它的大小不会改变。

Answer 2

您将每个职位定义为绝对职位。这不是一个好的解决方案。相反，你应该使用相对布局。它们可能有点复杂而不是“免费”，但它们确实解决了大部分问题。从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超出背景的特定部分。您可以使用background-position来实现此目的。

调整浏览器大小时元素不会重新定位

2 个答案: