html - その下にスペースがない場合はfloatdiv

Question

それで、私が3つのdivを持っているとしましょう。私はそれらを隣り合わせに列に積み重ねて欲しい。最初の列では、最初の2つのdivが適合しています。3番目のものを最初の2つの下に収める余地がないため、3番目のものを最初のものの隣に配置します。これはどのように行うことができますか？

ここに画像の説明を入力してください

score 1 · Accepted Answer

現在、これを行う唯一の確実な方法は、CSS3の列を使用することです。参考のためにここを参照してください：http ：//www.css3.info/preview/multi-column-layout/

これはまだ広くサポートされていないため（特にIEでは）、サポートを追加するにはjQueryプラグインColumnizerが必要になる場合があります：http： //dotmac.rationalmind.net/2011/03/cross-browser-multi-columns-with- jquery-and-css3 /

score 0 · Accepted Answer

CSS：

  #wrapper{
      width:960px;
      margin:0 auto;
    }
    .mydivs{
    float:left;
    }
    .cl{
       clear:left;
    }

マークアップ：

 <div id='wrapper'>
    <div class='mydivs'></div>

    <div class='mydivs'></div>

    <div class='mydivs'></div>
    <div class='cl'></div>
</div>

float:leftすべてのdivとそれらはあなたが望むように配置されます（スペースが残っていない場合は左に揃えて次の行に配置します）

2 に答える 2