3

私は現在、仕事や会議などを上に重ねることができるブラウザベースのカレンダーを作成しようとしています。これは、AJAX (または同様のもの) で動的に取得され、エンドユーザーに表示されます。

残念ながら、私の CSS は (非常に) さびているか、これは私が理解するのに苦労している別の奇妙なことです。

基本的な考え方は、カレンダーの日付/時刻に合わせて、<div>会議またはジョブごとに を作成することです。<td>ただし、現在、この div に幅を継承させる<td>ことができないため、他の日と重複しません。

私が使用している現在のCSSには... 

td {
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-bottom: solid 1px lightgray;
    border-top: solid 1px lightgray;
    **width: 12.5%;**
    height: 10px;
    font-size: 0.1em;
}

div.job { 
       position: absolute; 
       background: #C83636; 
       background: rgba(200, 54, 54, 0.7); 
       font-size: 8px; 
       color: white; 
       margin-top: 3px; 
       width: inherit; 
       height: 10px; 
}

次に、jquery を使用してこれらの div を作成します。
$("#1-1").html("<div class='job'>Some test text</div>");

現時点で理解しているように、これは、作成された が囲まれ<div>ている の幅を継承する<td>ため、セルにうまく収まることを意味するはずです。ただし、これは Opera や Firefox でテストしているときは発生していません。
私が見るもの

なぜこれが起こっているのか誰にも分かりますか？

4

3 に答える 3

4

div.jobクラスのposition：absoluteをposition：relativeに変更します

于 2012-07-04T11:17:36.603 に答える
0

たぶん、ジョブdivで「width：auto」を試してみてください。

おそらく、divを「display：inline-block」に設定することもできます。

今起こっていることは、あなたの仕事のdivが12.5％の幅を継承しているので、12.5％の12.5％になっていると思います（それが理にかなっている場合）。

于 2012-07-04T11:16:24.183 に答える
0

表示を追加:インライン ブロック; div.jobへ

ここに少し変更があります...好きなように使用してください

td {
 border-left: solid 1px gray;
 border-right: solid 1px gray;
 border-bottom: solid 1px lightgray;
 border-top: solid 1px lightgray;
 width: 12.5%;
 height: 10px;
 font-size: 1.1em;
}
div.job { 
 background: #C83636;
 background: rgba(200, 54, 54, 0.7);
 font-size: 1.1em;
 color: white; width: 100%; height: 100%;display:inline-block }
于 2012-07-04T11:44:46.747 に答える