4

したがって、2列のレイアウトがあり、次のように構成されています。

html構造：

#container
  #content
  #side-a
  .janitor

css：

#container{ width: 501px; }
#content { 
  float: left; 
  width: 300px;  
  border-right: 1px solid black;
}
#side-a{
  float: right;
  width: 200px;
}
.janitor {clear: both; }

境界線がない場合はすべて問題ありませんが、追加すると、ズームアウトするとレイアウトが崩れます。

4

2 に答える 2

4

これは、指定したコンテンツの幅に境界線の幅が追加されるためです。

#contentは300px、#side-aは200px、つまり合計で500pxです。#container501pxです。境界線がない場合でも、1pxが残っていますが、...

境界線を追加すると、1ピクセルでも、300ピクセル#content+ 2ピクセル幅、200#side-aピクセル+2ピクセル幅になります。ズームインしても折りたたまないのには驚きました。

これは、次を使用して修正できます。

box-sizing: border-box;

（適切なベンダープレフィックス付き）。

于 2011-01-25T13:39:34.247 に答える
3

理想的な解決策：このタイプの列レイアウトにはフロートを使用しないでください。とにかく501pxの固定サイズのコンテナを使用しています。したがって、動的フローティングは必要ありません。位置を明示的に指定するだけです。つまり、高さが適切に定義されていると仮定します。あるいは、-ええ、本当に-自然な方法で列を実装するテーブル（またはcssの表示：セマンティック純度が好きな場合はテーブル）を使用します。

質問の詳細については、1pxの境界線と200px + 300pxのコンテンツがあり、合計で501pxになるように見えます。つまり、確かにフィットします。ただし、ブラウザは任意の精度で幅を計算することはできません。それらはある程度の内部精度に丸められています-特にズームされた場合、その精度はCSSピクセルではなく、デバイスピクセルに関連している可能性があります。丸めによって多少のジッターが発生する場合は、1 + 200+300の合計が少しになる可能性があります。 501より多かれ少なかれ、したがって、レイアウトが501pxコンテナに予期せず収まらなくなります。これが、おそらくこのスタイルのCSSコーディングを使用すべきではない理由です。これは非常にデバイスとブラウザーに固有であり、小さな変更のために警告なしに機能しなくなる可能性があります。すべてのブラウザでズームインしても、レイアウトが崩れないことは間違いありません...

于 2011-01-25T14:19:21.353 に答える