0

それぞれの内部に異なる高さと異なる色を持つ 5 つの異なるサブコンテナーを含む棒グラフがあります。「チキン」サブコンテナはバーの下部に配置され、その上に卵サブコンテナが配置され、その上にポーク サブコンテナが配置されます。

卵のサブコンテナを鶏のコンテナの上に直接マージンなしで配置する方法がわかりません(たくさんのdivを追加できますが、それは不器用な解決策のようです)。

外観は次のとおりです (チキンは青色、卵は紫色など) (注: 各サブコンテナの高さは Javascript によって決定されます)

ここに画像の説明を入力

HTML:

<div class="days">
<div class="days-container">
<div class="dairy"></div>
<div class="beef"></div>
<div class="pork"></div>
<div class="eggs"></div>
<div class="chicken"></div>
</div> <!-- end days-container-->
</div> <!-- end days -->

CSS:

 .days {
 float: left;
 height:330px;
 width: 1em;
}

.days-container {
position:relative;
height: 330px;
}

.chicken {
position: absolute;
bottom:0;
background-color: #00AAFF;
width: 1em;
}

.eggs {
width: 1em;
????
}
4

2 に答える 2

0

チキン コンテナが一番下に配置されます。

    position: absolute;  bottom:0;

日・容器・卵の付きはございません。すべてを一番上に置きたい場合は、上記のステートメントを CSS から削除してください。

于 2013-04-30T21:51:45.897 に答える