5

我正在尝试使用以下规则放置一些 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;   
}

我的代码小提琴

4

3 回答 3

7

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

在这种情况下，请使用CSS3 列。浏览器支持应该足够好。

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;
}
于 2012-11-22T09:46:09.763 回答
3

您必须将列分成额外的 div。浮动左对齐元素水平对齐，因此它们的行为就像句子中的单词。包装 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 的解决方案。你必须想出另一种设计。

于 2012-11-22T08:48:11.083 回答
2

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

.container {
  overflow:scroll;
  width:10000px;
  height:200px;
  background:skyblue;    
  display: -webkit-flex;
  -webkit-flex-flow: column wrap;
}
于 2012-11-22T09:29:28.460 回答