1

jsFiddlehttp : //jsfiddle.net/Lijo/ryDnn/1/を参照してください。2列のレイアウトがあります。これは%ベースのレイアウトですが、最小幅が定義されています。(ブラウザーIE8の)ズームを75%以下にすると、うまく機能します。ズームを85%にすると、オレンジ色のボックスが下がります。このミスアライメントをどのように克服できますか?オレンジ色のボックスは、ズーム/ブラウザの最小化/デスクトップの解像度に関係なく、(画像に示されているように)正しい位置にとどまる必要があります。落ちてはいけません。

jsFiddleの結果ウィンドウ:http://jsfiddle.net/Lijo/ryDnn/1/embedded/result/

また、その背後にあるCSS理論を説明できれば素晴らしいと思います。

注:このような不整合は、ブラウザーが最小化されている場合でも観察されます。

注:これをテストしたとき、私のデスクトップは1024x768で構成されていました。


leftNavContainerとメインコンテナからマージンを削除した後でも、問題はそこにあります。http://jsfiddle.net/Lijo/ryDnn/10/を参照してください

ここに画像の説明を入力してください

4

2 に答える 2

2

丸め誤差を許容するために、パーセントを取ります。15%左用で、84%動作するはずです。

ただし、問題はマージンも追加していることであり、明らかにうまく機能しません。

最初に使用する 2 つの div を取得15%84%(または85%機能する場合)、それら 2 つの div をラッパーとして使用して、適切なマージンを与える div を配置することを検討してください。そうすれば、マージンがwidth計算に干渉することはありません。

つまり、マージンは div の width の一部ではありません

疑わしい場合は、ページ/Web インスペクターを広範囲に使用して、ボクシング モデルのアイデアを取得してください...

于 2012-04-13T13:11:32.383 に答える
1

margin-left-10px と width-15% 、mainContainer も同じであるため、合計幅は 100% leftNavContainer の幅は 25% です。

マージンを与える場合は、マージンサイズに関連する幅を減らすことを意味します

メインコンテナのCSS

      #mainContainer {

                   width:75%; //(or) reduce your margin
                        }

また

       #leftNavContainer {

                   width:15%; //(or) reduce your margin
                   margin:5px;
                        }
于 2012-04-13T14:22:46.843 に答える