1

私はちょっと立ち往生しているアプリケーションを持っています。自動配置する必要があるような方法で配置する必要があるウィジェットを作成しました。例えば：ここに画像の説明を入力

私はページにこのようなものを持っていますが、最初はこれらすべてが完全に配置されています(水平方向に配置されています)が、コンポーネントの1つのサイズが変更されるとすぐに:ここに画像の説明を入力

このようになります。私が欲しいのは、空のスペースを消費するように自動調整することです。

css をいじって float :left と display: block にしました。これにより、各コンポーネントを水平方向に整列させることができましたが、それでもページのスペースを利用できませんでした。

どんな助けでも大歓迎です

4

4 に答える 4

0

私の理解が正しければ、あなたが本当に望んでいるのはこれらのウィジェットの 3 列構造のようです。その場合、次のようになります。

HTML

<div class='three-column'>
    <div class="widget">...</div>
    <div class="widget">...</div>
    <div class="widget">...</div>
</div>
<div class='three-column'>
...
</div>
<div class='three-column'>
...
</div>

CSS

.three-column {
    width: 30%;
    padding-right: 3%;
    float: left;
}

更新: http://jsfiddle.net/cBgj4

于 2013-06-12T17:53:31.543 に答える
0

多くのアニメーションを必要とせず、非常に理解しやすく、目的を満たすスクリプトが必要な場合は、jquery.popbild.js を試してください。

プロジェクトはhttp://funscripts.popbild.com/jquery_popbild/からダウンロードできます。

主にピンタレスト風に要素を3列（3分割使用）に配置するために作成

于 2013-06-12T17:58:30.267 に答える