Html 元素不'；调整浏览器大小时不重新定位_Html_Css_Positioning_Css Position_Horizontal Scrolling

Html 元素不'；调整浏览器大小时不重新定位

html css

Html 元素不'；调整浏览器大小时不重新定位,html,css,positioning,css-position,horizontal-scrolling,Html,Css,Positioning,Css Position,Horizontal Scrolling,我正在尝试创建一个只有水平滚动的网站。请看看这个。我的问题是，当我调整浏览器大小时，内容（浅黄色框内的段落）不会重新定位。我想把这一段放在黄环段上面。我该怎么做下面是我的代码 HTML <html> <head> <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" /> <link rel="stylesheet" type="text/css" href="s

我正在尝试创建一个只有水平滚动的网站。请看看这个。我的问题是，当我调整浏览器大小时，内容（浅黄色框内的段落）不会重新定位。我想把这一段放在黄环段上面。我该怎么做

下面是我的代码

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>

我尝试将

#info

的位置设置为

相对的

，但当我这样做时，它会从页面中消失。

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

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

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的大小，请使用最大宽度：xyz

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

您需要将顶部和左侧属性设置为百分比，而不是像素值。@Jrod我也这样做了（还更新了链接的演示页面的CSS）。但和以前一样。它不会改变任何东西，问题是，图像也在调整大小，内容的位置也在调整大小，但内容的大小保持不变。这就给你留下了两个选择，让一切都是静态的，或者让一切都是弹性的。有一半的元素是静态的，一半是弹性的，这是行不通的。如果您可以提供某种模型，则更容易理解您的确切需求。我希望内容定位在黄环段上，而不考虑浏览器大小。然后，您应该使用百分比，因为调整浏览器大小时背景图像会调整大小。

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
}