CSS div浮動-從上到下和從左到右

Question

我怎樣才能把div從上到下和從左到右

示例： http ： //jsfiddle.net/ZWxGW/2/

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


解決方案 http://jsfiddle.net/pMbtk/33/

Answer 1

您可以將column-count屬性用於此類型的函數：

檢查我以前的答案

我想將列表項顯示為2列或更多列（動態對齊）

Answer 2

你可以試試這個...

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/

Answer 3

.message {

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

如果從左到右和從上到下都適合您，請嘗試此操作。

Answer 4

1）在這種情況下，您必須采用div列（在圖像中為紅色），並且必須在該div內放置其他div 1,2,3,4 ...
給div以下屬性。

.message，.outer_div {
向左飄浮;
高度：自動；
寬度：200像素；
}

2）在另一種情況下，
如果您想從左到右，從上到下，那么您不需要外部div ...以紅色指定

Answer 5

從contentDiv移除高度，然后將float:left; 以便包裹您的內容。

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

Answer 6

我在您的示例中嘗試過此操作：

.message {

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

}

它會有所幫助。

祝好運 ！