1

各イベントが、開始日と終了日を設定する HTML5 データ タグを含むリスト アイテムであるインタラクティブなタイムラインを作成しています。（下記参照）

<ul>
    <li data-start="-4181" data-end="-3251">Adam</li>
    <li data-start="-4173" data-end="-4117">Cain</li>
    <li data-start="-4163" data-end="-4125">Abel</li>
    <li data-start="-4051" data-end="-3139">Seth</li>
    <li data-start="-3946" data-end="-3041">Enos</li>
</ul>

以下に示すように、jQuery で各イベントの幅を適切に設定し、親 div の先頭から左にマージンを設定しています。

タイムライン

これが私の本当の質問です...私は現在、リスト項目でfloat:leftを使用していますが、カインやアベルなどの短いものは、新しい行にジャンプして適切に配置するのではなく、アダムのリスト項目に対して浮かんでいます左に反対。これは理にかなっており、親要素にスペースがある場合、隣接する要素に対して浮動する必要があります-しかし、浮動と絶対配置の組み合わせを使用してこれらのアイテムを動的に整列させる方法はありますか?

最終的なタイムラインには 800 以上のイベントがあり、タイムライン スペースを適切に共有する必要があり、イベントの高さが 10 個を超えないようにしたいと考えています。

どんな助けやアイデアも大歓迎です!

4

3 に答える 3

1

同じ行に複数表示する必要がない限り、フロートする必要はないかもしれません。また、バーが互いに重なったり、他のコンテンツと重なったりしない限り、CSS の配置は必要ないかもしれません。

必要に応じてそれぞれにマージンを設定して、li タグを非フローティング ブロック レベル要素にするだけでよいようです。

于 2012-06-06T17:43:16.713 に答える