在空间发生变化时定位容器而不移动

我正在尝试将一个容器放置在特定位置 - 如何做到这一点并使它保持成比例的位置，即使我放大或缩小屏幕？

.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&Auml;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&Ouml;KSADRESS</p>
        <p>V&auml;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">&Ouml;PPETTIDER</p>
        <p>Vardagar: 10-19<br>L&ouml;rdag: 10-17<br>S&ouml;ndag: 11-16</p>  
    </div>
    <div id="design">
        <p>Webbplatsen &auml;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;
}

小提琴：http://jsfiddle.net/nvsodsfs/1/

结果：http://jsfiddle.net/nvsodsfs/1/embedded/result/

你有一个居中且 1000px 宽的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>

不是 100% 确定这会起作用，但您可以将其最小宽度设置为您选择的大小并设置最大宽度相同。

如果您希望它保持在同一个位置，请使用%作为尺寸，它会在不移动的情况下更好地收缩。

此外，您应该为身体设置一些尺寸以容纳所有这些

我只是用div（带有 position：relative）包装所有居中的内容，然后您可以使用 right：0 定位容器。根据包装器的宽度，它将小于或更右。

完整示例

相关内容

最新更新

热门标签：