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

【问题标题】：Elements don't reposition when browser is resized调整浏览器大小时元素不会重新定位
【发布时间】：2013-01-28 15:02:52
【问题描述】：

我正在努力创建一个只有水平滚动的网站。请看一下这个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，但是当我这样做时，它会从页面上消失。

【问题讨论】：

您需要将 top 和 left 属性设置为百分比而不是像素值。
@Jrod 我也这样做了（也更新了链接的演示页面的 CSS）。但是和以前一样。它不会改变任何东西。
问题是，图像也在调整大小，内容的位置也在调整大小，但内容的大小保持不变。这给你留下了两个选择，让一切静止或使一切有弹性。有一半的元素是静态的，一半是弹性的是行不通的。如果您可以提供某种样机，则更容易理解您的确切需求。

标签： html css positioning css-position horizontal-scrolling

【解决方案1】：

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

【讨论】：

无论浏览器大小如何，我都希望内容位于黄色环段上方。
那么你应该使用百分比来调整浏览器大小时背景图像的大小。

【解决方案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 实现这一点。

【讨论】：