2

フィドルを参照してください

ここでは、コンテンツを次のように表示しました

ボックス1

ボックス2

ボックス3

ボックス4

ボックス5

ボックス6

複数列のCSSを使用して、表示を次のように変更しました

ボックス1 ボックス4

ボックス2 ボックス5

ボックス3 ボックス6

使用したcssは次のとおりです。

      .columnsmulti {
            -moz-column-count: 2;
        -moz-column-gap: 10px;
        -moz-column-rule: 0px double #666;
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        -webkit-column-rule: 0px double #666;
        column-count: 2;
        column-gap: 10px;
        column-rule: 0px double #666; width:400px;
    }  


    .blue_bx{ width:190px; background:#6BBEBD; background-repeat:repeat-y; float:left; font-family:Georgia, "Times New Roman", Times, serif;}

    .store_img img{ width:188px; height:75px; margin-top:1px; margin-left:1px; border:0px;}

    .store_name { float: left; width:150px; }

    .circle_ico{ float:right; padding-top:5px; padding-right:8px;}

    .store_name, .store_name a{ color:#FEFFD6;  font-family: 'impactregular'; font-size:20px; padding-left:5px; }

    .store_category, .store_category a{ width:170px; margin:0 auto; font-size:14px; color:#FDF279; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;  }

望ましい出力は次のとおりです。隣接する div ボックスは同じ高さにする必要があります (ボックス 1 のコンテンツがボックス 4 より多い場合、ボックス 1 とボックス 4 は box1 の高さにする必要があります)。これを達成する方法は？助けてください。

4

1 に答える 1

1

css プロパティを使用する必要がありますmin-height

例えば：min-height:85px;

適切な最小高さを見つけます。私の推測では、このフィドルのようになります: http://jsfiddle.net/bkpqa/1/またはhttp://jsfiddle.net/bkpqa/2/

動的コンテンツをロードする場合は、 gettermin-heightを使用して in javascriptを調整する必要があります。.height()

于 2013-01-03T06:50:25.750 に答える