1

この質問がここや Google で見つからないなんて信じられない - ばかげた質問をするのが恥ずかしいのですが、今朝は頭がおかしくなりそうです...

次のような div で作成された単一列の積み上げ棒グラフが温度計のように見えると想像してください。

<div id="thermo">
  <div id="thermored"></div>
  <div id="thermogreen"></div>
</div>

#thermo は含まれる div、#thermored は高さ全体の背景、#thermogreen はデータを反映するように変更されるオーバーレイです。現実の世界では、タスクの完了率を示します。

このままでは、うまくいきます。ただし、テーブルセル内で機能する必要があります（私の選択ではありません-CMSのシステム制限です）。問題は、含まれている TD の高さが (固定の高さを試しているにもかかわらず) 2 つの div の合計であることです。それらは相対的に配置され、オーバーレイされています。

これが現在の CSS です。ここ数時間、非常に多くのポジショニングの組み合わせを試してきたため、見栄えがよくありません。

#thermo{
    width:140px;
    height:500px;
    position:relative;
}
#thermored{
    width:50px;
    height:100%;
    margin-left: 20px;
    background-color: red;
}
#thermogreen{
    width:50px;
    height:280px;
    margin-left: 20px;
    background-color: green;
    position:relative;
    bottom: 280px;
    float:left;
}

*編集情報については、私が抱えている問題はChromeとFFにあります-IE(8)はTDの高さを希望どおりに設定します

4

3 に答える 3

2

あなたが抱えている問題は、relative配置によって要素が通常の流れのままになるという事実から来ていると思います。position: absolute;内部thermogreendivの設定を試しましたか？絶対配置では要素が通常のフローから外れるため、tdタグはdivの高さのみを考慮しますthermo。divの高さは500pxに設定されています。（編集：実際にthermoredはposition属性なしで残すことができます。divの高さの100％に設定されています。つまり、高さがthermo500pxtdになっても、心配するCSSは少なくなります）。

私が思いついたjsfiddleを見てください：http： //jsfiddle.net/dgRCu/3/

これで問題は解決しますか？td現在700以上に拡張するのではなく、500ピクセルの高さにとどまっているようです。

これらのdivの意図された目的がわからないので、赤いバーが背景色であるのに対し、緑のバーの高さを拡大することが必要なように思われるのでbottom: 0;、divに設定しました。thermogreen

于 2013-02-14T23:49:42.053 に答える
0

IEの開発ツールを使用して、テーブルセルがどのようにレンダリングされているかを確認しましたか？htmlテーブルとcssコードだけでjsfiddle.netを作成できる可能性はありますか？

于 2013-02-14T23:51:28.207 に答える
0

TD セルは、「最も高い」高さのサイズに折りたたまれます/展開されます。セル内で css を使用すると、さまざまなブラウザーや特に電子メール リーダーでさまざまな問題が発生します。

だから、あなたは試しました：

<tr>
<td height="500"></td>
</tr>

そして、それらのブロック要素をそこに入れますか? テーブルの最初の td セルの高さを 2 つの div の合計より大きくします。

あなたは1つを浮かせているので、最大のものは高さを強制する必要があります.

于 2013-02-14T22:56:39.547 に答える