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

这是因为你在利润率上使用了百分比。如果您希望它们保持原位，请使用px或em等固定单位。例如

margin-right: 100px;

在调整窗口大小时使div保持不变

2 个答案:

CSS

HTML