フロートdiv要素

は、それでは、私は3つのdivのを持っているとしましょう、その下にスペースがない場合。私はそれらを列の中に、お互いに横に積み重ねておきたい。最初の列で、最初の2つのdivのフィット。今、私は、最初の2つの下に収まるように三番目の余地がないので、三番目は、最初の1の次に行きたいです。これはどうすればできますか？現在フロートdiv要素

enter image description here

出典

2012-05-02 Veltar

おおまかな図が役立ちます。そのかわりに、編集 – Jashwant

を答えることが可能と –

以下のおかげで、の「隣」を参照してくださいので、私はあなたの代わりに、行の列を意味だと思い、質問によってのみ – Veltar

、これを行うための唯一の方法は、固体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/

出典

2012-05-02 16:42:24

ありがとう、それはトリックを行う必要があります。 – Veltar

さて、それは動作しますが、完全ではありません。私はそれらを列に分割すると、うまく動作します。しかし、私は幅とoverflow-y：autoを指定しなければなりません。そしてそれは2番目のスクリーンショットのように見えます。 http://imgur.com/a/KBbQg – Veltar

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あなたのすべての部門と彼らはあなたが望むようにポジションになります（スペースが残っていなければ左と次の行に整列します）

出典

2012-05-02 16:47:08 Jashwant

I'mnが訂正した場合、問題は、それが最初の各列を埋めるようにし、次に行く、それらをスタックする方法でした。あなたのソリューションは、最初の行を埋め、その後、次の行になります。 –

フロートdiv要素

答えて

関連する問題