0

何千ものliアイテムを含むulリストがあります。幅は固定されていますが、コメントや画像などの内容に応じて高さが異なります。

現在、私のリストはユーザーの画面を水平方向に流れ、新しい行に移動します。ただし、問題は、次の行の最初のliが前の行の最初のliの隣にないことです。代わりに、前の行の最長のliを取り、その下に留まります。

たとえば、http://oi47.tinypic.com/21kgqkw.jpg

これはできますか?

クリスのリクエストごとに更新1:あなたが理解する私の写真を見てください。基本的に、すべてのliは、線から線まで垂直方向に互いに接近している必要があります

4

2 に答える 2

2

純粋なhtml/cssにそのような垂直フローを実装する簡単な方法はありませんが、同様のことを行うjqueryプラグインがあります。組積造をチェックする必要があります

基本的な単一列のデモを見てください

于 2012-07-10T16:17:48.447 に答える
2

ご提供いただいた情報が限られているため、ここではliタグが適切でない場合があります。article代わりに、またはを使用できますdiv。リストアイテムを使用する場合ol、コメントには自然な順序(コメントが残された日付/時刻)があるため、コメントのリストはとしてより意味があります。

ここではタグは問題ではなく、メモです。

手元の質問へ:あなたのサンプル画像に基づいて、石積みはあなたの最良のルートかもしれません:

組積造は、動的グリッドレイアウトスクリプトです。CSSフロートの裏側と考えてください。フローティングは要素を水平方向に配置し、次に垂直方向に配置しますが、メーソンリーは要素を垂直方向に配置し、各要素をグリッド内の次のオープンスポットに配置します。その結果、壁に石をはめ込む石工のように、さまざまな高さの要素間の垂直方向のギャップが最小限に抑えられます。

このプラグインにはバニラバージョンまたはjQueryバージョンがあります。

于 2012-07-10T16:18:38.957 に答える