1

グラフを上下に並べるのではなく、水平に並べるのに大きな問題があります。何らかの理由で、float:left働くことを拒否します。これは私が現在持っているものです：

<h2><center>Title1</center></h2>
<div id="flot-graph-1" class="graph-area"></div>
<h2><center>Title2</center></h2>
<div id="flot-graph-2" class="graph-area"></div>
<h2><center>Title3</center></h2>
<div id="flot-graph-3" class="graph-area"></div>

divに追加しようとしstyle="float:left"ましたが、機能しません。また、このテキスト全体を別のdivコンテナーで囲み、同じスタイルのフレーズを追加してみました。サイコロはありません。CSSページに移動して、次のようなことを試みました

#flot-graph-3
{
    float: left;
}

まだ何もありません。私も試しdisplay:inlineましたが、まだ何も機能していません。水平方向にタイリングする代わりに、左マージンを消去してメトロアプリの左側に貼り付けます（ただし、上下に表示されます）。助けてください！誰かがこれを解決する方法を知っていますか？

4

1 に答える 1

2

これを行うには、css でグラフ エリア クラスを display:inline-block に設定し、親コンテナーの幅を各グラフの幅の「少なくとも」3 倍に設定します。行。

float:left を使用することもできますが、親要素が十分に大きくなく、グラフが次の行にオーバーフローしていると思われます

display:inline flot ではグラフがブロック レベルの要素である必要があるため、機能しません

各グラフの上に h2 タイトルが必要な場合は、h2 要素がブロックであるため、各グラフとタイトルを独自の div でラップする必要があります。

例えば。

HTML:

<div class="graphWrapper">
    <div class="graph-area">
        <h2><center>Title1</center></h2>
        <div id="flot-graph-1" class="graph-area"></div>
    </div>
    ....etc
</div>

CSS:

.graphWrapper{width:1000px} /* at least 3x width of graph */
.graph-area{display:inline-block}

等

于 2012-08-27T20:28:20.497 に答える