Question

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

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

Goal

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

我尝试使用float:left创建类似上图的内容，但结果如下：

Current code

如何创建第一张图片？我当前的代码（创建第二个图像）出了什么问题？

这是我的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

Answer 1

现代平板电脑和智能手机应该正确显示

在这种情况下，请使用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,.i2,.i3 {
    display: inline-block;
    vertical-align: top;
}

Answer 2

您必须将列分隔为额外的div。 Float left水平对齐元素，因此它们的行为就像句子中的单词一样。包装div的每个部分并将包装器向左浮动会产生您想要的效果，但仅限于此特定情况。如果要更加动态，您可能需要重新考虑您的设计。

HTML：

<div class="container">
    <div class="wrap">
        <div class="i1">1</div>
        <div class="i1">2</div>
        <div class="i1">3</div>
        <div class="i1">4</div>
    </div>
    <div class="wrap">
        <div class="i2">5</div>
        <div class="i3">6</div>
    </div>
    <div class="wrap">
        <div class="i1">7</div>
        <div class="i1">8</div>
    </div>
</div>

CSS：

.container {
    overflow:scroll;
    width:10000px;
    height:200px;
    background:skyblue;    
    position:absolute;
}

.wrap
{
    float: left;
    width: 102px;
}

.i1,.i2,.i3 {   
    width:100px;
    background: #000;
    border-radius: 20px;
    text-align:center;
    color: #fff;
}
.i1 {
    height:33px;
}
.i2 {
    height:66px;   
}
.i3 {
    height:100px;   
}

http://jsfiddle.net/Kyle_Sevenoaks/PyT5w/（我改变了颜色，因为它们伤害了我的眼睛。）

在对问题进行一些澄清之后，如果要动态填充高度变化，那么就没有不使用某些疯狂Javascript的解决方案。你必须提出另一种设计。

Answer 3

您可以使用flexbox。我不确定iOS浏览器的支持，但是新的webkit浏览器确实支持它，所以值得一看。

.container {
  overflow:scroll;
  width:10000px;
  height:200px;
  background:skyblue;    
  display: -webkit-flex;
  -webkit-flex-flow: column wrap;
}

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

3 个答案: