我正在尝试将一个容器放置在特定位置 - 我该如何做到这一点并使其保持在适当的位置，即使在我放大或缩小屏幕时也是如此？
HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="huvud">
</div>
<div id="nav-yttre">
<div id="nav-mitten">
<ul id="nav-inre">
<li><a href="index.html">HEM</a></li>
<li><a href="om_oss.html">OM OSS</a></li>
<li><a href="blogg.html">BLOGG</a></li>
<li><a href="marken.html">MÄRKEN</a></li>
<li><a href="hitta_hit.html">HITTA HIT</a></li>
</ul>
</div>
</div>
<div id="main">
<p>Hem</p>
</div>
<div id="right">
<p>This container</p>
</div>
<div id="fot">
<div id="adress">
<p id="rub">BESÖKSADRESS</p>
<p>Vägen 1, 12345 Stockholm</p>
</div>
<div id="kontakt">
<p id="rub">KONTAKTA OSS</p>
<p>Telefon: 08-123 45 67</p>
<p>Mail: info@hej.se</p>
</div>
<div id="tider">
<p id="rub">ÖPPETTIDER</p>
<p>Vardagar: 10-19<br>Lördag: 10-17<br>Söndag: 11-16</p>
</div>
<div id="design">
<p>Webbplatsen är gjord av MD</a></p>
</div>
</div>
</body>
CSS:
/* Header */
#huvud{
width: 1000px;
margin: 0 auto;
}
#header{
display: block;
}
/* Meny */
#nav-yttre{
width: 1000px;
height: 35px;
margin: 0 auto;
background-image: url("Rusty-bar2.jpg");
}
#nav-mitten{
display: table;
width: 100%;
padding: 10px;
}
#nav-inre{
display: table-row;
list-style: none;
font-family: 'Special Elite', cursive;
font-size: 25px;
}
#nav-inre li{
display: table-cell;
}
#nav-inre li a{
display: block;
text-decoration: none;
text-align: center;
color: #eeeeee;
}
#nav-inre li #here{
color: #221f20;
}
#nav-inre li a:hover{
color: #221f20;
}
/* Main */
#main{
width: 1000px;
margin: 0 auto;
min-height: 500px;
}
#fadein {
margin: 10px auto;
position:relative;
width:281px;
height:500px;
padding: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#fadein img {
position:absolute;
}
/* Right */
#right{
position: absolute;
left: 1450px;
top: 200px;
background-color: #221f20;
height: 300px;
width: 200px;
}
#right p{
color: white;
}
/* Fot */
#fot{
width: 1000px;
margin: 0 auto;
border-top: solid #221f20 1px;
text-align: center;
clear: both;
}
#adress{
width: 334px;
float: left;
}
#kontakt{
width: 333px;
float: left;
}
#tider{
width: 333px;
float: right;
}
#design{
width: 500px;
margin: 0 auto;
clear: both;
text-align: center;
background-image: url(rusty-bar-small.jpg);
}
#design p{
color: #eeeeee;
font-weight: bold;
}
#design a{
color: #eeeeee;
}
#design a:hover{
color: #221f20;
}
#rub{
font-weight: bold;
}
/* Allmänt */
p{
font-family: Verdana, Arial, sans-serif;
color: #221f20;
font-size: 0.9em;
}
fiddle :http://jsfiddle.net/nvsodsfs/1/
最佳答案
您有一个居中且 1000 像素宽的 div:#huvud。
将 div 放在 #huvud 中:
<div id="huvud">
<div id="right">
<p>This container</p>
</div>
</div>
制作 #huvud display: relative 使绝对位置子元素相对于它定位自己。现在看起来像这样:
#huvud {
width: 1000px;
margin: 0 auto;
position: relative;
}
制作 #right left: 100% 这样它就被强制放在它的新父级之外，然后根据需要给它一个左边距:
#right {
position: absolute;
left: 100%;
top: 200px;
background-color: #221f20;
height: 300px;
width: 200px;
color: #FFF;
margin-left: 100px; /*need more?*/
}
完整示例
为简单起见，所有其他内容已被删除。
将示例设为全屏，并在放大/缩小时看到它保持固定在原地
/* Header */
#huvud {
width: 1000px;
margin: 0 auto;
position: relative;
}
/* Right */
#right {
position: absolute;
left: 100%;
top: 200px;
background-color: #221f20;
height: 300px;
width: 200px;
color: #FFF;
margin-left: 100px;
}Other content removed for simplicity - the div is this way >>>>>>
<div id="huvud">
<div id="right">
<p>This container</p>
</div>
</div>关于html - 当空间改变时定位容器而不移动它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27326934/