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>