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

.message {

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

如果从左到右、从上到下适合您，请尝试此操作。

Answer 3

1) 在这种情况下，您必须采用列 div(图像中的红色)，并且必须将其他 div 1,2,3,4 放入此 div 中...如图所示

为 div 提供以下属性。

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

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

Answer 4

你可以尝试这个...

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 5

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

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

Answer 6

我在你的例子中尝试过这个：

.message {

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

}

它有帮助。

祝你好运 ！