CSS div float - 上から下、左から右

どのようにdivの上からbuttomと左から右に置くことができます

example: http://jsfiddle.net/ZWxGW/2/


http://jsfiddle.net/ZWxGW/2/enter image description here


SOLUTION http://jsfiddle.net/pMbtk/33/

0
いいえ:/ ...私は上から下に注文が必要です
追加された 著者 user970727,
あなたのために左から右に、次に上から下にあなたの運動をしますか?
追加された 著者 Sunil Kumar B M,

6 答え

このタイプの関数に column-count プロパティを使用することができます:

私のこれまでの回答を確認してください

私は欲しいですリストアイテムを2列以上表示する(動的配置)

3
追加された
私のcontentDivには高さが指定されていて、メッセージには動的な高さがあります(時には単語が1つだけ...時には10語のテキスト)。編集:それは動作します。本当に素敵な解決策!ありがとう! jsfiddle.net/pMbtk/33
追加された 著者 user970727,
喜んで:)
追加された 著者 sandeep,

私はあなたの例でこれを試しました:

.message {

 width:90px;
 margin:3px;
 background-color:#dfdfdf;
 position:absolute;

}

それが助けになる。

がんばろう !

2
追加された
これは動作しません
追加された 著者 Sunil Kumar B M,

contentDivから高さを削除し、コンテンツをラップするように float:left; を配置します。

http://jsfiddle.net/ZWxGW/5/

1
追加された
高さは重要です(変更することはできません)。フロートを追加するとき:左(上から下)の順序が正しくありません。
追加された 著者 user970727,
より明確にする必要があります。
追加された 著者 Gurvinder,
あなたがこの事をクロスブラウザで見せてくれることを願って、 jsfiddle.net/ZWxGW/10 の希望をチェックしてください。
追加された 著者 Gurvinder,
それは彼が求めていたものではありません。
追加された 著者 Jasper,

あなたはこれを試すことができます...

ul {
    width:60px; height: 60px;
}

ul li{
    float:left;
    width:20px;
    list-style:none;
}
ul, ul li {
    -moz-transform: rotate(-90deg) scaleX(-1);
    -o-transform: rotate(-90deg) scaleX(-1);
    -webkit-transform: rotate(-90deg) scaleX(-1);
    -ms-transform: rotate(-90deg) scaleX(-1);
    transform: rotate(-90deg) scaleX(-1);
   /* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-3.061616997868383e-16, M12=1, M21=1, M22=3.061616997868383e-16, SizingMethod='auto expand')";

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=-3.061616997868383e-16,
            M12=1,
            M21=1,
            M22=3.061616997868383e-16,
            SizingMethod='auto expand');
}

IEでテストされていない http://jsfiddle.net/rlemon/Y5ZvA/3/

0
追加された
.message {

 width:90px;
 margin:3px;
 background-color:#dfdfdf;
 float : left;
}

左から右へ、上から下へあなたのために働くなら、これを試してください。

0
追加された


1) In this case you have to take column div(s) (red colored in image) and you have to put other divs 1,2,3,4 inside this div... as in image
arrangement give below properties to div.

.message,.outer_div{
float:left;
height:auto;
width:200px;
}


2) in another case,
if you want from left to right,top to bottom, then you don't need to have a outer div...specified in red color

0
追加された