1

float:left を使用して DIV を操作しています

DIV 2 がサイズを大きくするとき

次のようなものが得られます。 

+---+ +----+
| 1 | |    |
+---+ |    |
      |  2 |
      |    |
      |    |
      +----+
+---+
| 3 |
+---+

これを達成する方法はありますか:

+---+ +----+
| 1 | |    |
+---+ |    |
+---+ |  2 |
| 3 | |    |
+---+ |    |
      +----+

jqueryに頼らなくても？

4

5 に答える 5

2

これには、純粋な CSS3 :nth-childプロパティを使用してこれを行うことができます。次のように書きます。

.innerdiv:nth-child(even){
    float:right;
    border-color:red;
}

これをチェックしてくださいhttp://jsfiddle.net/RsYgR/1/

于 2012-11-07T05:43:30.970 に答える
1

だから、これは私が思いついた最良の解決策です：

for (var i = 0; i < box.length; i++) {  //json array with box info
    createHTML.box(i);  //creates boxes with id="#box_"+i
    if(isEven(i))
        $("#box_"+i).css( "float","right" );
    else
        $("#box_"+i).css( "float","left" );
}

は偶関数です

 function isEven(n) 
 {
     return (n % 2 == 0);
 }

私はいくつかのjqueryが必要になることを知っていました..

完全に動作します

于 2012-11-07T01:20:49.033 に答える
1 
<div class="left" style="float: left;">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    .......
    <div class="boxN"></div>
</div>
<div class="right" style="float: right;"></div>

これは、任意の数のボックスで機能します。これは、左に 2 つの列があり、高さが伸び、右も伸びているようなものです。

実際のコードは次のとおりです: http://jsfiddle.net/SVbyj/

于 2012-11-06T22:15:59.527 に答える
-1

左側の 2 つのボックスを、右側の列の左側に浮かんでいる列に配置するだけです。

すなわち

<div class="column1" style="float:left;">
<div  class="box1">
    Here is box 1
</div>
<div  class="box3">
    Here is box 3
</div>
</div>
<div class="column2" style="float:right;">
    <div  class="box2">
        Here is box 2
    </div>
</div>
于 2012-11-08T10:33:17.463 に答える
-1

それらをdivでラップすると、機能するはずです。

  <div id="bothleftnright"> 
     <div id="float-left" style="float:left;"></div>
     <div id="float-left2" style="float:left;"></div>
     <div id="float-right" style-"float:right;"></div>
  </div>

外側の div の高さが 3 つの div すべてに適合する限り、これを修正する必要があります。

反対票の理由がわからない場合は、コメントしてください

于 2012-11-06T22:15:18.910 に答える