5

まず第一に、私は新しいプログラマーなので、すぐに判断しないでください:)。とにかく、しばらくの間、この問題に苦労してきました。問題は、ウィンドウのサイズを変更(何でもスケーリング)すると、すべての要素が混乱することです。ウェブサイトのサイズを変更すると、以前よりも表示が少なくなるはずです。要素を移動しません。

コードは次のとおりです。

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

4

2 に答える 2

10

移動させたくない場合は、要素を固定サイズの親コンテナーに配置します。

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>
于 2013-09-12T16:46:34.597 に答える
2

これは、マージンにパーセンテージを使用しているためです。それらを所定の位置に固定したい場合は、pxまたはのような固定ユニットを使用してemください。例えば

margin-right: 100px;
于 2013-09-12T16:48:56.330 に答える