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

发布时间：2020-12-14 23:21:55 所属栏目：资源来源：网络整理

导读：我正在尝试放置一些div,使用此规则：尽可能填充第一列,然后(当第一列填满时)填充第二列等(请参见下图) 这就是我想要的:(用Paint创建！) 在上图中,如您所见,第一列有1,2,3,4,并且没有足够的垂直空间可以在第一列中放置5.所以5应放在第二列…… 我试图使用floa

我正在尝试放置一些div,使用此规则：尽可能填充第一列,然后(当第一列填满时)填充第二列等(请参见下图)

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

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

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

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

这是我的HTML代码：

<div class="container">
<div class="i1">1</div>
<div class="i1">2</div>
<div class="i1">3</div>
<div class="i1">4</div>
<div class="i2">5</div>
<div class="i3">6</div>
<div class="i1">7</div>
<div class="i1">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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!