1

作業中のデザインはほぼ完成していますが、CSSで必要な処理を実行するのに問題があります。私がやろうとしていることは次のようなものです：

図1、どのように見えるか

ただし、ページが生成されると、出力は次のようになります。

図2、それがしていること

3番目のボックスを最初のボックスの下と2番目のボックスの隣に浮かせるにはどうすればよいですか？私は知っているすべてのトリックを試しましたが、それを機能させることができません。また、各ブロックはデータベースからプルするPHPのループによってページに追加されるため、静的コンテンツがないために制限があり、特定のブロックの高さを事前に知る方法がありません。することが。

4

4 に答える 4

1

2番目のレイアウトでは、3つのプライマリ列を使用することをお勧めします。TwitterBootstrapや960Gridなど、いくつかのグリッドシステムを利用できます。これらのシステムを使用すると、基本的なフレームワークをすばやくレイアウトして、癖をなくすことができます。div（ブロック要素）が3つの列のいずれかに入ると、当然、上から下に積み重ねられます。

完全に並んでいるdivの下部に関しては、JavaScriptを使用して、列の親の全体の高さを計算し（当然、最も高い列の高さを継承します）、ブロック要素の合計の高さを計算できます。各列内で、javascriptを使用して、それぞれの最も低いブロック要素に高さの差を追加します。

JSの高さの計算では、パディングとマージンを必ず考慮してください。

于 2012-05-02T22:28:41.580 に答える
1

列の数が可変である場合、CSSは実際にはそれを実行できません（すべての一般的なブラウザーで機能させたい場合）。代わりに、この問題を正確に解決するように設計されたjQueryMasonryを使用してください。

これは私が同じことを言っていますが、より多くの言葉があります：既知の子の幅を持つCSS2列

于 2012-05-02T16:00:37.820 に答える
0

divを表示順に積み重ねるのではなく、3列に配置してみてください。

于 2012-05-02T16:01:31.687 に答える
0

その振る舞いはfloatルールによるものです。フローティング要素の上部は、ページの通常のフローでその前にある別の要素の上部を超えることはできません。要素をどのように配置するかは正確にはわかりませんが、調査することをお勧めします。

floatのCss仕様は次のとおりです。http ：//www.w3.org/TR/CSS2/visuren.html#float-rules （css2ですが、ルールは引き続き適用されます）ルール5と6を確認してください。

于 2012-05-02T16:01:55.980 に答える