2

HTMLとCSSをいじってみました。

私の div は、以下で述べたものとは異なる位置に配置する必要があります。

問題のJSフィドルリンク

<!doctype>
<html>
<head>
<style>
div{
    float:left;
    background-color:green;
    width:10px;
    margin:1px;
}
body{
    width:50px;
}
</style>  
<body>
<div style="height:20px"></div>
<div style="height:30px"></div> 
<div style="height:40px"></div>
<div style="height:35px"></div>
<div style="height:55px;background-color:red"></div>
</body> 
</html>

レンダリングする必要がある場合は、赤いボックスと新しいボックスを、対応する最初の行要素のすぐ下の左から始まる 2 行目にレンダリングする必要があります (要素間に特定のマージンがあります)。

条件：

長方形の幅は常に同じです。高さだけが異なります。

私のjsfiddleの例では、指定された幅で4つの要素しか行を占有できないと仮定しています。したがって、5 番目の要素は自動的に次の行から開始され、それに応じて最初の行の要素の下に配置されます。

私が欲しいのは、このようなものです。

ここに画像の説明を入力

誰かがこれを解決するのを手伝ってくれませんか。

前もって感謝します、

スダルサナム.N

4

3 に答える 3

1

div に対して「pinterest のような」効果を得たい場合は、javascript が必要です。この jQuery プラグインをチェックしてください: http://masonry.desandro.com/index.html

お役に立てれば

于 2013-07-08T09:40:28.883 に答える
1

clear:leftブレークを追加する必要がある div に追加します

  div:nth-child(5){
    clear:left
}

デモ

于 2013-07-08T09:26:16.883 に答える
0

float left の代わりに display inline ブロックを使用します。

div{
    display:inline-block;
    background-color:green;
    width:10px;
    margin:1px;
    vertical-align:top;
}
body{
    width:60px;
}

デモ

JSを使用して、必要なものを正確に取得する必要があると思います。

于 2013-07-08T09:42:37.470 に答える