0

私のページのいくつか（現在サイトは開発中です）で、いくつかの天気情報が表示されます：LINK CSS問題の説明：見出しWETTERの下に4つのボックスが表示されます。1つは今日の天気（HEUTE）を表示し、その下の3つのボックスは翌日の天気を表示します。ご覧のとおり、3つの小さなボックスは、100％のフレーム幅を正確に合計しているわけではありません。また、upporワイドボックスの幅は少し異なります。

->どのようにして以下に到達することができますか？a）3つのボックスを合わせて、横向きのビューでWEBBROWSER / IPADを使用する場合は、上記の幅の広いボックスとまったく同じ幅にします。同時にb）4つのボックスを下に配置します（ページ幅は100％）。 iPhone/Androidでページを閲覧する場合。あなたが持っているかもしれないヒントを楽しみにしています。

4

1 に答える 1

0

私はあなたが何を望んでいたかを理解したと思います。

http://jsfiddle.net/Txjh5/で大まかなデモを作成しました

コンテナ全体を使用してフレーム幅をシミュレートしました。これには最大幅があります。ボックスは一番上のボックスと一致するパーセンテージですが、マージンを使用してボックス間にギャップを作成しました。

.last {margin-right: 0;}

最後のボックスのマージンを削除します。

メディアクエリは、各ボックスを100％の幅に強制するために、より小さな画面サイズに使用されます。

質問を誤解してしまった場合は申し訳ありませんが、デモをご覧ください。

于 2013-02-02T13:31:49.493 に答える