6

3 つのフローティング ボックスが隣り合っている動的なサイトを作成しようとしています。それぞれの幅は 33.33% です。それらの周りのコンテナー div は、幅が 75% です。

ここで問題に関する記事を見つけました: CSS: Jumping columns
ここでも同じ問題の例を見つけました: Jumping columns example

ウィンドウ サイズをドラッグすると、IE7 以前でジャンプが表示されます。

これを回避できるかどうかは誰にもわかりますか？(Javascript なし)

4

4 に答える 4

14

状況に応じて、2 つの異なるソリューションを使用します。まず、Nicole Sullivan のアプローチを試してください ( overflow: hidden;float/width の代わりに行の最後の要素を使用します)。

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

.container {
  width: 75%;
}

.box1 {
  width: 33.33%;
  float: left;
  display: inline; /* fixes another IE bug */
}

.box2 {
  overflow: hidden;
}

これはほとんどの場合に機能します。

それができない場合は、代わりに最後の要素に数ピクセルの負のマージンを追加します。

.box2 {
  width: 33.33%;
  float: left;
  display: inline; /* fixes another IE bug */
  margin-right: -3px;
}

その最後の要素が代わりに右に浮いている場合は、左に負のマージンを追加するだけです。overflowこれまでのところ、適合しなかったいくつかのケースではうまくいきました。

于 2009-08-21T09:35:42.173 に答える
2

このような状況では、値が機能するまで値をごまかす IE 専用のスタイルシートを使用して問題を回避する傾向があります。この場合、幅を 33% に設定するだけです。完璧にはなりませんが、それが Web の性質です。

于 2009-07-05T17:33:00.587 に答える
0

簡単な答えは、まったく丸めず、1/3 要素の外観を共有する幅 1% の最終的な「スペーサー」要素を作成することだと思います。IE でさえ、33 + 33 + 33 + 1 の丸めを処理できるはずです。

于 2009-10-04T03:46:44.140 に答える
0

私も同じ問題を抱えていました。ie7 は 33.33% を正しくレンダリングしませんでした。33% で動作しますが、ヘアライン オフでした。上記の最初の応答の 2 番目のコード ブロックからのアドバイスに加えて、ちょっとしたハックを使用しました。それは私のために働いた、私はそれが役立つことを願っています。

.all-boxes {
   width: 33.33%;
   float: left;
   display: inline;
   *margin-right: -1px; /* Add the asterisk */
 }

マージン値は実装に基づいて変更する必要があるかもしれませんが、1px でうまくいきました。

于 2013-10-09T14:48:11.617 に答える