CSS div浮动 - 从上到下,从左到右

时间:2012-02-06 12:01:18

标签: css css-float

如何将div从上到下,从左到右

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


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


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

6 个答案:

答案 0 :(得分:3)

您可以将column-count属性用于此类函数:

检查我之前的答案

I want to show list items as 2 or more columns (dynamic alignment)

答案 1 :(得分:0)

.message {

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

如果从左到右,从上到下为你工作,请尝试这个。

答案 2 :(得分:0)


1)在这种情况下,您必须采用列div(图像中的红色),并且必须将其他div 1,2,3,4放在此div中...如图像
arrangement 将以下属性提供给div。

  

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


2)在另一种情况下,如果你想从左到右,从上到下,那么你不需要有一个外部的div ...用红色指定

答案 3 :(得分:0)

你可以试试这个......

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/中未经测试

答案 4 :(得分:-1)

从contentDiv中删除高度并放置float:left;以便它包装您的内容。

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

答案 5 :(得分:-2)

我在你的例子中试过这个:

.message {

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

}

它有帮助。

祝你好运!