-1

HTMLとCSSでカレンダーを作りました。

30 分ごとに個別の td があります。

しかし、その td 内に 1 分ごとに 30 個の div を作成したいと考えています。

現在、次のように表示されています。

http://jsfiddle.net/mausami/FHfjL/1/

しかし、各divを1行で表示したい。

各divを表示するには、各divに「」と書きました。

divは次のようになります:

 <div style="display:inline-block; clear:both; width:0.1%;" class="08:00">'</div>

誰でも私を助けてもらえますか？

4

5 に答える 5

2

まず、コードに対するいくつかの重要な改善。

  • クラス名は数字で始めることはできません。. 簡単な修正は、それらの先頭に文字列を追加することです-「min_」を使用しました。
  • 同じことがid何度もあります。ID は 1 回だけ使用する必要があります。
  • すべてのスタイルを外部に移動します - インラインで行うため、更新が困難です。
  • あなたはfloat何もしていないので、必要ありませんclear:both;

これはあなたが持っているものと同じですが、きれいなコードです: http://jsfiddle.net/daCrosby/FHfjL/7/

さて、あなたの質問。「[どのように] 各 div を 1 行に表示しますか?」各 div を 1 行 (合計 30 行) にするか、各 div を同じ行 (合計 1 行のみ) にするかはよくわかりません。だからここに両方の​​方法があります：

各 div を独自の行に表示するには:

.tbDay div{
    display:block;
}

http://jsfiddle.net/daCrosby/FHfjL/8/

30 個すべてを 1 行に表示するには:

.tbDay div{
    display:inline-block;
    width:3.333333%; /* 100% divided by 30 divs */
    margin-left:-4px;
}

に注意してくださいmargin-left:-4px;。これは、こちらで説明されているインライン ブロック要素間の間隔の修正です。

http://jsfiddle.net/daCrosby/FHfjL/9/

于 2013-06-05T01:43:07.990 に答える
1

これらの div を使用して時間の経過を表示したい場合は、

バックグラウンドでグラデーションと % を使用できます<meter></meter>。
http://www.w3.org/wiki/HTML/Elements/meter
js またはサーバー サイド スクリプトから簡単に適切な値を入力してカレンダーを更新できます。

乾杯

于 2013-06-05T00:48:31.327 に答える
0

clear:bothそれらを表示したいのに、なぜやっているのinline-blockですか？そのスタイル ルールを削除するだけで、期待どおりに動作するはずです。

于 2013-06-05T00:36:41.617 に答える
0

分のdivを次のように表示していますdisplay:inline-block

これを変更するblockか、完全に削除してください。div の代わりにリストを使用することも検討してください。

EDIT 上記の答えは、「新しい行の各div」が1分のdiv = 1つの新しい行を意味すると仮定しました。以下のコメントの説明に従って、td内のすべてのdivを1行に表示するには、aを適用しますwhite-space:nowrap

たとえば、フィドルの css 部分に次を挿入します。

#tblDay td{
    white-space:nowrap;
}
于 2013-06-05T00:38:01.820 に答える