html – float：left尽可能填充相同的列

概述我正在尝试放置一些div,使用此规则：尽可能填充第一列,然后(当第一列填满时)填充第二列等(请参见下图) 这就是我想要的:(用Paint创建！) 在上图中,如您所见,第一列有1,2,3,4,并且没有足够的垂直空间可以在第一列中放置5.所以5应放在第二列…… 我试图使用float：left创建类似上图的内容,但这是结果： 如何创建第一个图像？我当前的代码(创建第二个图像)出了什么问题？ 这是我的HT 我正在尝试放置一些div,使用此规则：尽可能填充第一列,然后(当第一列填满时)填充第二列等(请参见下图)

这就是我想要的:(用Paint创建！)

在上图中,如您所见,第一列有1,2,3,4,并且没有足够的垂直空间可以在第一列中放置5.所以5应放在第二列……

我试图使用float：left创建类似上图的内容,但这是结果：

如何创建第一个图像？我当前的代码(创建第二个图像)出了什么问题？

这是我的HTML代码：

<div ><div >1</div><div >2</div><div >3</div><div >4</div><div >5</div><div >6</div><div >7</div><div >8</div></div>

这是我的CSS：

.container {    overflow:scroll;    wIDth:10000px;    height:200px;    background:skyblue;        position:absolute;}.i1,.i2,.i3 {    float:left;        wIDth:100px;    background:lime;    border-radius: 20px;    text-align:center;}.i1 {    height:33px;}.i2 {    height:66px;   }.i3 {    height:100px;   }

Fiddle of my code

解决方法

just modern tablets and smartphones should show it correctly

在这种情况下,使用CSS3 columns. browser support应该足够好.

http://jsfiddle.net/thirtydot/AQ7bp/4/

.container {    -webkit-column-wIDth: 100px;    -moz-column-wIDth: 100px;    column-wIDth: 100px;    -webkit-column-gap: 5px;    -moz-column-gap: 5px;    column-gap: 5px;}.i1,.i3 {    display: inline-block;    vertical-align: top;}

总结

以上是内存溢出为你收集整理的html – float：left尽可能填充相同的列全部内容，希望文章能够帮你解决html – float：left尽可能填充相同的列所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。