2

フォームの html を生成する joomla プラグインを使用しています。私が抱えている問題はcssにあります。

このスクリプトは、さまざまな高さの div をいくつか生成し、それらすべてを 2 列のレイアウトに積み上げます。問題は、それらがすべて左にフロートされているため、2 番目の列の高い div が、次の div が隣接する短い 1 列目の div の下にフロートするのをブロックする場合があることです。さらに手を振ることなく、ここにjsfiddleがあります

フロートを正しくスタックするために使用できる、合理的にブラウザと互換性のある css はどれですか? 2 番目の列の div には、最初の列の div と区別するためのクラスや ID が基本的にないことに注意してください。

私が避けたいと思うことは次のとおりです。

  1. nth-child() のような互換性のないソリューション
  2. html で css フックを生成するようにスクリプトを変更する

Javascriptは大丈夫です

編集: JavaScript のコメントが十分に目立たないようです。jsfiddle が立っているので、すべてが正しく機能しています。これは、私がレイアウトをどのように見せたいかです。残念ながら、correctfloatdiv でクラス名を使用することはできません。これを生成するのは私ではないためです。問題の内容を確認するには、正しいフロート クラス名を削除してください。

4

5 に答える 5

2

http://masonry.desandro.com/

これはあなたが探しているものですか？

于 2012-10-14T08:23:36.120 に答える
1

このスタイルコードをcssファイルで使用します

#yourdiv{
 float:left;
 height:yoursizepx;
 width:yoursizepx;
 overflow:hidden;
}
于 2012-10-14T08:07:56.243 に答える
1

クラスで使用clear: leftすると、short指定した例の問題が解決されます。

.short{
    height:100px;
    clear:left;
}

参照: http://jsfiddle.net/U5FV9/2/および http://jsfiddle.net/U5FV9/3/

ただし、動的に作成されたフォームについて提供された情報に基づいて、常に問題を解決できるとは限らないと感じざるを得ません。たとえば、short要素を右側に配置する必要がある場合はどうなるでしょうか。

あなたにとってより良い解決策は、フロートされ、short要素tallを含む2つの列コンテナーを持つことだと思います。そうすれば、常に正しく表示されることを確認できます。

これを実装する方法の例を次に示します: http://jsfiddle.net/U5FV9/5/

于 2012-10-14T08:11:56.767 に答える
1

Mladen の要求に従って、私にとって最適なアプローチを投稿しています。私はselectivizrと呼ばれる目立たない javascript ライブラリを使用しました。

次に、次を使用しました：

someclassname:nth-child(2n){
    float:right;
}

2 番目の列コンテナーを実際に必要とせずに、2 番目の列 div ごとに右揃えにします。理論的にはdivが片側に積み重なる可能性があるため、これはまだ完全な解決策ではありませんが、これまでのところ、それが起こっているのを見たことはありません.

助けてくれてありがとう。

于 2012-10-14T13:01:32.760 に答える
0

私の理解が正しければ、ブロックのオーバーフロー プロパティを変更または追加してみましたか?

overflow:hidden;
于 2012-10-14T07:59:00.887 に答える