10

質問は簡単です。タイルを作成する要素がたくさんあります。ただし、高さが長いものもあります。他のものの2倍と言いましょう。純粋なCSSスタイリングだけで、それらすべてをタイルで一致させたい.

ここに私が持っているものがあります:

ここに画像の説明を入力

そして、これは私が欲しいものです:

ここに画像の説明を入力

これが私のコードです：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    box-shadow: 0 0 1px black inset;
    width: 100px;
    display: inline-block;
}
#d1,
#d2,
#d4,
#d5,
#d6,
#d8,
#d9{
    height: 100px;
    background-color: yellow;
}
#d7,
#d3{
    height: 200px;
    background-color: red;
}
</style>
</head>
<body>
<div id="d1">1</div><div id="d2">2</div><div id="d3">3</div><div id="d4">4</div><div id="d5">5</div><div id="d6">6</div><div id="d7">7</div><div id="d8">8</div><div id="d9">9</div>
</body>
</html>

そして、JSBin でライブで試すことができます: http://jsbin.com/usovek/1/edit

ノート：

  • コンテンツは動的です
  • 箱の数は変動します
  • どのボックスも長くなる可能性があります。そしておそらくもっと広い。
  • ボックスの幅または高さは常に単位数です。この例の単位は 50 で、一部のボックスは 50 で、一部のボックスは高さ 100px です。しかし、問題が任意の数のユニット（1、2、3 ... 50px、100px、150px、...）で解決されれば完璧です。
4

1 に答える 1

8

コンテンツが静的である場合は、比較的配置されたコンテナー内で位置絶対ブロックを使用できますが、コンテンツが動的である場合は、CSS（Only）でこれを行うことができない場合、使用する必要があるのは次のとおりです。

jQuery組積造

またはあなたができる最善はこれです

CSS

#d7,
#d3{
    height: 200px;
    background-color: red;
    float: left;
}

3番目の可能性：箱を容器に包み、それに応じて浮かせます

デモ（物事が静的な場合にのみ可能）:)

于 2013-03-10T08:01:43.787 に答える