2

次の html div があります。

...
<body>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
<div id="lineChart_div" style="width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
</body>
...

私がやろうとしているのは、最初の div (棒グラフを含む) と 2 番目の div (グラフのテキストを含む) を並べて表示し、その下に他の 2 つの div (他のグラフを含む) を表示することです。他の垂直方向、つまり次のようにしたい：

希望

そして、私が現在得ているものは次のとおりです:

実際

cdfChart_div (div4) が lineChart_div (div3) の上に表示されています。これを修正するには、どの CSS スタイルを使用する必要がありますか?

4

5 に答える 5

9

floatのdiv直後に来る stats_div:

style="clear:left;"

完全なコード:

...
<body>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
<div id="lineChart_div" style="clear:left; width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
</body>
...

はフロートされているためstats_div、その内容は通常の流れから外されます。したがって、通常のフローの一部である next の内容は、 の内容のdivためのスペースを作りませんstats_div。前の float の内容の後に内容を入れたい場合clearは、次の側にする必要があります。通常の流れのどちらかの端で機能するがよく見られます。divdivclear: bothdiv

于 2012-06-28T14:04:55.527 に答える
2

ここで私の例を見てください

HTML

<body>
<div id="barChart_div" style="width: 145px; height: 250px;">aa</div>
<div id="stats_div" style="width: 350px; height: 250px;">bb</div>
<div id="lineChart_div" style="width: 600px; height: 250px;">cc</div>
<div id="cdfChart_div" style="width: 600px; height: 250px;">dd</div>
</body>

CSS

#barChart_div, #stats_div { float:left; }
#lineChart_div { clear:left; }

説明

まず最初に、「インライン」CSS を使用するのは適切ではないことを覚えておいてください。外部 CSS または内部 (つまりヘッダー) CSS を優先する必要があります。

ただし、その例を見てみましょう: jsFiddle。
ご覧のとおり、別の方法で指定しないと、すべての div が「理想的な列」になります。これは、「html パーサー」の通常の流れがそれらをその位置に置くためです。

代わりに、スパン要素を使用してこれを行うと、同じ「行」にあるすべての要素を取得することになります (明らかに、オーバーフローしない場合)。ここでそれを見ることができます。

float:left前の要素の「右マージン」にdivを「強制」することを伝えると。

ここで、2 番目の要素がフローティングされているため、3 番目の要素が同じように動作します。
「標準」として機能するにclear:leftは、「通常の」動作を復元するために使用する必要があります

于 2012-06-28T14:09:21.577 に答える
2

試す

<body>
<div style="overflow:auto">
  <div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
  <div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
</div>
<div id="lineChart_div" style="width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>

于 2012-06-28T14:03:22.797 に答える
0

可能であれば、ソースの順序を変更して stats_div が最初になるようにし、float:right を使用します。

于 2012-06-28T14:01:31.607 に答える
0 
<div id="stats_div" style="width: 350px; height: 250px; float:right; background-color:#0099CC; border:1px solid black">custom</div>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; background-color:#0099CC; border:1px solid black">1</div>
<div id="lineChart_div" style="width: 600px; height: 250px; float:left;background-color:#0099CC; border:1px solid black">2</div>
<div id="cdfChart_div" style="width: 600px; height: 250px;float:left; background-color:#0099CC; border:1px solid black">3</div>

それをhtmlに貼り付けると、効果が表示されます

于 2012-06-28T14:11:17.660 に答える