0

私は自分のプロジェクトのタイムバーをやっています。ここで達成しようとしているのは次のようなものです:

                                                         / <- Screen margin
+-------------------------------------------     -------+\
| +---------+    +---------+    +---------+        +----|/---+
| | 12:00PM |    | 01:00AM |    | 02:00AM |  ....  | 11:|\PM |
| +---------+    +---------+    +---------+        +----|/---+
+-------------------------------------------     -------+\
                                                         /

これらの要素は実際には画像 (グラデーションなどがあります) であり、テキストではありません。次の要素へのマージンがあり、左にフロートするように設定されているため、すべてが正常に機能します。よくほとんど。問題は、「画像」でわかるように、最後の画像がカットされる可能性があることです (そして、私は実際にこの正確な動作が必要です)。

私が達成できた唯一のことは、最後の要素を次の行、画像の午後 12:00 より下のどこかに表示すること、または完全に非表示にすることです。見るべきものだけを示す。white-space: nowrap と overflow: hidden を使用してみましたが、役に立ちませんでした。

これらの要素の現在の CSS スタイルは次のとおりです。

#timebar{
    position: absolute;
    width: 6672px;
    height: 33px;
    top: 0px;
    left: 187px;
    background-image: url("../images/timebar.png");
    border-right: 1px black solid;
    z-index: 1;
}
.time_element{
    width: 57px;
    height: 18px;
    margin-left: 221px;
    margin-top: 8px;
    list-style: none;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/* THIS IS FILLED DYNAMICALLY VIA JAVASCRIPT */);
    float: left;
    -webkit-transform: translateZ(0);
}

誰かが私にヒントを与えることができますか？

4

1 に答える 1

2

幅が時間要素の合計幅よりも大きい内部コンテナー内に時間要素を配置することをお勧めします。次に、このコンテナーをタイムバー内に配置し、タイムバーに適用overflow: hiddenします。この方法では、時間要素の折り返しが発生しません。

時間要素が動的である場合、JavaScript を使用して内部コンテナーの幅を動的に計算します。それらの静的な量がある場合は、css を使用して幅を適用できます。

カットオフ タイム要素を表示する必要がある場合は、内側のコンテナーに負の値を指定して margin-left を使用して内側のコンテナーをスクロールします。

于 2013-01-22T12:35:58.377 に答える