0

body が複数の div ボックスで構成される html ページを作成しています。各ボックスには以下のスタイルがあり、幅は固定で、画面の 1/3 である 400px ですが、高さは固定されていません。したがって、私の画面は、そのようなボックスを水平に 3 つ収容できます。float : left も使用して、スペースがある場合にボックスが常に右のスペースを埋めるようにしました。しかし、それでも私が望むものを満たしていません。

PHPスクリプトを使用してdivボックスを動的に作成しています。右端の B の div ボックスが同じ行の左端の div ボックスの A よりも高さが大きい場合、含まれる次の div ボックスの C は A の下部に移動し、その上部レベルは B の下部レベルよりも下になります。 A と C の間にスペースが残っています。では、そのスペースを削除するにはどうすればよいでしょうか。

ページにスペースが残らないように、すべての div がそれに応じて配置されるように、どの css を使用する必要がありますか。

.respost {
    margin-left: 10px;;
    width: 400px;
    float: left;
    border-bottom: solid blue;
    border-top: solid blue;
    border-left: solid blue;
    border-right: solid blue;
    margin-top: 30px;
    word-wrap: break-word;
}
4

1 に答える 1

0

現時点では、これを行うにはいくつかの方法があります。まず、HTML で個別の列を使用できます。for ループのように div を追加したいだけなので、これは厄介かもしれません。

このシナリオでは、次のように html に 3 つの列があります。

<div class="column_wrapper">
  <div class="column column1">
    ...
  </div>
  <div class="column column2">
    ...
  </div>
  <div class="column column3">
    ...
  </div>
</div>

次に、column1、2、および 3 の css は次のようになります。

.column {
    width: 400px;
    float: left;
}

そして、PHP で再投稿を列の 1 つに追加できます。

$count = 0;
$columns = array(0=> [], 1=> [], 2=> []);
foreach ($items as $item) {
    $columns[$count++ % 3][] = $item;
}

jQuery をページに追加することを気にしない場合は、jQuery Masonryを使用することをお勧めします。

于 2013-03-10T21:44:31.820 に答える