0

棒グラフをスタイリングしています。潜在的に無制限のバーがあり、それぞれが親コンテナーに比例した幅を持つ必要があります。現在、次のようなものがあります。

.one-column  {
    width: (100% / 1);
}

.two-columns {
    width: (100% / 2);
}

.three-columns {
    width: (100% / 3);
}

etc

...各バーに追加します。

これを回避し、無制限の列を処理できるルールを 1 つだけ持つ賢い方法を考えられる人はいますか? データ属性と関係があるのでしょうか?

4

2 に答える 2

0

LessCSSを見てみましょう- 数学演算をサポートしています。それ以外の場合は、Javascript を使用してバーのスタイルを処理することをお勧めします。おそらくRaphaelのようなグラフ ライブラリを使用しますか?

于 2012-08-16T10:55:38.880 に答える
0

CSS3 セレクターのトリッキーな組み合わせをいくつか使用すると、使用されている列の数と、そのスタイルに依存するコンテナーの幅を見つけることができます。

div:first-child:last-child {
width: 100%;
}
div:first-child:nth-last-child(2), div:last-child:nth-first-child(2) {
width: 50%;
}
div:first-child:nth-last-child(3), div:first-child:nth-last-child(3) ~ div {
width: 33.33%;
}
div:first-child:nth-last-child(4), div:first-child:nth-last-child(4) ~ div {
width: 25%;
}

ご覧のとおり、可能性のある div の数ごとにルールを追加する必要がありますが、そこにある div の数を検出してそれに応じてクラスを設定する必要はもうありません。

しかし、あなたの場合、別の可能な解決策もあります。などを div と親要素で適切な方法でdisplay: table使用できます。display: table-cell次に、親の幅を に設定し100%、コンテナーの幅をすべて同じ値 (例: 1%) に設定すると、希望どおりの結果が得られます。

于 2012-08-16T11:06:29.610 に答える