7

私は多くの CSS を含むプロジェクトに取り組んでいます。顧客は、ドラッグ アンド ドロップで UI コンポーネントを再配置できるホームページにグリッド レイアウトを配置したいと考えています。これらの UI コンポーネントは、1x1、2x2、3x3 など、さまざまなサイズにすることができます。目的の新しい場所に UI アイテムをドロップすると、他のコンポーネントが脇に押し出されます。可能性のある穴は、1x1 コンポーネントで埋める必要があります。

どのように機能するか

  1. コンポーネントをドラッグする前に
  2. 2x2 コンポーネントのドラッグ
  3. コンポーネントを真ん中に落とすと、2 つの 1x1 コンポーネントがスペースを作り、2x2 の周りに適応します。

グリッドのサイズは 8 1x1 に制限されていませんが、幅だけでなく高さも拡大および縮小できる必要があります。

私はむしろテーブルを使用しませんが、それ以外は提案を受け付けています. 今のところ、ドラッグ アンド ドロップして jQuery DOM オブジェクトを切り替えることができるインライン ブロック div を使用しました。顧客が望んでいる効果とはほど遠い: 現在の状況

4

1 に答える 1

1

同じアイデアで多くの動的レイアウトを作成しました。ブロックからブロックへのフロートの動作が次の後続のブロックでどのように停止するかについてもっと考える必要があるため、必要に応じて正しい位置に再配置されます。そのため、フロートストップ要素を定義する必要があります。あなたのブロックはfloat:left多分で動作しfloat:rightます。ある時点で、この動作は CSS で行うのが最適な場所で停止する必要があることに気付くでしょう。

.floatstop {
     clear: both; //the important code here..
     width: 100%;
     height: 1px;
     line-height: 1px;
     margin-top:-1px;
}

と HTML

<div class="floatstop"></div>

左側 (おそらく右側も) の次のブロックへの境界線が必要なすべてのブロックで構成されているので、右に配置されたブロック用のスペースと境界線スペースを持つ基本レイアウトを定義する必要があります。前にブロックします。

しかし、もっと現代的な方法があります！CSS3 コードを使用してレイアウトを定義できます。

.columnblock {
     width: 100%;
     column-gap: 30px;
     // for symmetric columned layouts use..
     column-count: 3; 
     // or for not symmetric layouts use..
     column-width: 280px;
}

<div class="columnblock">
    <p>Lorem Ipsum</p>
    <p>another Paragraph</p>
</div>

ここで言及すべきことは他にもありますが、 http://www.w3schools.com/css3/css3_multiple_columns.aspについて読むことができます

于 2013-04-12T11:47:07.320 に答える