2

次の構成では、3つの要素が流体コンテナ内にあります。

+-----------------+
| +-----+ +-----+ |
| |  A  | |  B  | |
| +-----+ +-----+ |
| +-------------+ |
| |      C      | |
| +-------------+ |
+-----------------+

要素AとBの幅は50％です。要素Cの幅は100％です。ここで実際の例を見ることができます。

要素AとBの幅を計算するときに丸められるため、コンテナの幅が奇数のピクセルの場合、行の右端が整列しません。フレームのサイズを変更しているときに、端がずれて再整列するのを確認できます。一番上の行に2つ以上の要素、たとえば10が含まれていると、効果が悪化します。

代わりに、要素Cの幅を、パーセンテージ幅の合計ではなく、要素AとBの実際の幅の合計に等しくしたいと思います。これは、JavaScriptを使用したり、テーブルに頼ったりせずに可能ですか？

4

1 に答える 1

2

1つの解決策は、最初の要素を左に浮かせて、希望の幅にすることです。右のものは浮きません、そしてデフォルトの幅を持っています、それはそれが伸びることを可能にし、左によって残されたスペースを埋めます。それがどのように機能するかについては、例の変更を参照してください：http: //jsfiddle.net/QDVeD/12/。基本は次のように要約できます。

#left {
  float: left;
  width: 50%;
  height: 50px;
}
#right {
  height: 50px;
}

ただし、これは、2つを超えるアイテムの場合とは異なり、拡張性がありません。最後の要素は通常、他の要素よりもわずかに長くなります：http: //jsfiddle.net/QDVeD/18/。

于 2011-07-13T15:08:55.727 に答える