html - 调整窗口大小时使 div 保持在同一位置

Question

首先我是新程序员，所以不要快速判断:)。无论如何，我已经为这个问题苦苦挣扎了一段时间。问题是当我调整（缩放）窗口时，它会弄乱我的所有元素。在调整我的网站大小时，您应该看到的比以前少。不移动元素。

这是代码：

HTML：

<div id="leftblock">
   </div>



<div id="rightBlock">
</div>

CSS：

#leftblock {   

 margin-left: 20%;
 background-color: red;
 float: left;
 height: 100px;
 width: 3px;  

}



#rightBlock { 
 margin-right: 20%;
 background-color: red;
 float: right;
 height: 100px;
 width: 3px;


}

为了确定我的意思，在编辑器中测试代码，然后尝试调整窗口大小。

jsFiddled here

Answer 1

如果您不希望它们四处移动，请将元素放置在固定大小的父容器中。

DEMO

CSS

#container {
 width: 1000px;
}

#leftblock {   
 margin-left: 20%;
 background-color: red;
 float: left;
 height: 100px;
 width: 3px;  
}

#rightBlock { 
 margin-right: 20%;
 background-color: red;
 float: right;
 height: 100px;
 width: 3px;
}

HTML

<div id="container">
    <div id="leftblock">
    </div>

    <div id="rightBlock">
    </div>
</div>

Answer 2

这是因为您使用百分比作为利润率。如果您希望它们保持原位，请使用固定单元，例如pxor em。例如

margin-right: 100px;