0

以下のように表示する必要がある 4 つの div があります。

|--------|------|
|Big Area|div 1 |
|        |------|-------|
|        |div 2 | div 3 |
|        |------|-------|
|        |
|        |
|        |
|        |
|--------|

私はこれを試します：

<html><head>
<style>
#big_area {
    float: left;
    width: 200px;
    height: 200px;
}
#div_1 {
    float: left;
    clear: right;
}
#div_2 {
    float: left;
}
#div_3 {
    float: left;
}
</style>
</head>

<body>
<div id="big_area">big area</div>
<div id="div_1">div 1</div>
<div id="div_2">div 2</div>
<div id="div_3">div 3</div>
</body>
</html>

しかし、うまくいきません。私が自分に設定clear:leftしてシーンの下に移動すると、それが真の結果ではない場合 、解決策はありますか? 誰にでも感謝し、ウィキのアニムソンに感謝します。あなたのWikiを読みましたが、私の場合は使用できないと説明されています。それから私はあなたに別の方法で問題を言おうとします. 幅と高さが異なる 非常に多くの s (N 個のs) があることを確認してください。このs を続けて表示する必要があります。たとえば、次のようにします。div 2div 2div 3Big Area


float:right

divdivdiv

|-----|-----|-----|-----|-----|-----|-------|-----|
|Div 1|Div 2|Div 3|Div 4|Div 5| ... |Div N-1|Div N|
|-----|-----|-----|-----|-----|-----|-------|-----|

floatすべてのdivs を1つの行に表示するleftと、すべてが 1 つの行に表示されます (この行は、ウィンドウの幅に関連して自動的に分割されます)。divしかし、確かにいくつかの s の前に休憩が必要です。たとえば、後に休憩が必要Div 3です。
次に、に追加clear:leftしてみますdiv 4。うまく機能してdiv 4おり、その後の数字（div 5、...、N-1、N）は新しい行に表示されますが、div 1高さが大きい場合（のようにBig Area）は表示されません私の他divのものは以下に行きますがBig Area、それらはclear:left解決策と一緒に行きます。以下の結果を参照してください。

|-------|-----|-----|
| Big   |Div 2|Div 3|
| Area  |-----|-----|
|(div 1)|
|       |
|-------|
|-----|-----|-----|-------|-----|
|Div 4|Div 5| ... |Div N-1|Div N|
|-----|-----|-----|-------|-----|

<br />の後にタグを追加しようとするdiv 3と、その後div 4の他divの s は新しい行に移動しますが、残念ながら次のように表示されます。

|-------|-----|-----|
| Big   |Div 2|Div 3|<br />
| Area  |-----|-----|
|(div 1)|Div 4|
|       |-----|
|       |Div 5|
|       |-----|
|       | ... |
|       |-----|
|       | N-1 |
|       |-----|
|       |  N  |
|       |-----|
|       |
|-------|

ああ、私は答えを見つける..!!!!!!!! :D :) :D/
すぐ下に私の答えが表示されます

4

3 に答える 3

1

CSS:

#big_area {
     display: inline-block;
     float: left;
     width: 200px;
     height: 200px;
    } 

​#div_2, #div_3 {
    display: inline;
   }​

HTML: 

<div id="big_area">big area</div>
<div id="div_1">div 1</div>
<div id="div_2">div 2</div>
<div id="div_3">div 3</div>

JSFiddle リンク

あなたが言っていないことをもっとやろうとしない限り、これはうまくいくはずです。この場合のクリアは不要です。inline要素をorに指定しない限りinline-block、行はデフォルトで後で改行さdiv_1れます。

于 2012-06-17T22:55:22.457 に答える
1

それがオプションである場合、div 1、2、および 3 をコンテナーに入れると、これははるかに簡単に解決できます。div 1 を除く可能性のあるすべての div は、左にフローティングできます。

<div id="big_area">big area</div>
<div id="small_area">
    <div id="div_1">div 1</div>
    <div id="div_2">div 2</div>
    <div id="div_3">div 3</div>
</div>

そうしないと、信頼できるクロスブラウザー ソリューションを見つけるのに非常に苦労することになると思います。div の高さと幅が固定されている場合、おそらく絶対配置で何かを管理できますが、それは理想的な方法ではありません。

于 2012-06-17T23:13:37.943 に答える
0

私は答えを見つけます：D私は以下のようなものを使用して私のコードの後
に​​追加していました：<br />div 3javascriptdocument.createElement

var temp = document.createElement('br');
document.getElementById('all_of_div_container').appendChild(temp);

私は自分のコードを以下に変更しました、そしてそれはとてもうまくいきます：

document.getElementById('all_of_div_container').innerHTML += "<br />";

appendChild(temp)この方法でHTMLに同じコードを追加しますが、なぜすべてのアイテムを新しい行に表示するのかわかりませんfloat:left（私が言って質問で描くように）...！
とにかくinnerHTMLうまくいきます。

ありがとう
楽しんでください;）

于 2012-06-18T09:36:41.897 に答える