0

div 1が展開されたときにdiv 4を同じ位置に保つ方法を理解するのに問題があります。すべての div が左に浮いており、div 1を展開して展開すると、 div 2も展開され、2 と 4 の間に空のスペースが残ります。

div 1, 3とdiv 2, 4を別々の div にラップできません

例

これは、div に使用するスタイルです。

 .subcatagory {
    float: left;
    width: 150px;
 }
4

2 に答える 2

2

以下はあなたが探していることをします。元のすべてのdivを、2にしか収まらないように幅を設定して、外側のdivでラップしました。次に、カテゴリ（div1とdiv3はこのクラスに分類されます）と、互いに左右に浮かぶサブカテゴリの2つのdivを分類しました。示すコードは次のとおりです。

   <html>
 <head>
  <style type="text/css">
    #dvMain{
     width:305px;

    }

    .subcategory, .category{
      width: 150px;
      border:solid black 1px
    }

    .subcategory{
     float: right;
    }

    .category {
    float: left;
    }
  </style>
 </head>
 <body>
  <div id="dvMain">
    <div id="dv1" class="category">1asadssadsad
    sadsa
    ds
    adsad
    sa
    dsadsadsadsa
    </div>
    <div id="dv2" class="subcategory">2</div>
    <div id="dv4" class="subcategory">4</div>
    <div id="dv3" class="category">3</div>
  </div>
 </body>
</html>
于 2012-04-16T11:11:47.550 に答える
2

floatの問題です。これには、 Js masonryを使用する必要があります。それ以外の場合は、次のようにマークアップを定義する必要があります。

<div class="parent">
    <div class="long">1</div>
    <div>3</div>
</div>
<div class="parent">
    <div>2</div>
    <div>4</div>
</div>

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

于 2012-04-16T10:57:17.717 に答える