CSS保持元素最大顶部和左侧答案

【问题标题】：CSS keep elements maximum top and leftCSS保持元素最大顶部和左侧
【发布时间】：2014-05-28 22:00:42
【问题描述】：

我正在尝试用 PHP 做一个网站。

<span style="height:60px;"></span>
<span style="height:90px;"></span>
<span style="height:95px;"></span>
<span style="height:45px;"></span>
<span style="height:60px;"></span>
<span style="height:70px;"></span>
<span style="height:55px;"></span>
<span style="height:60px;"></span>
<span style="height:40px;"></span>

上面的跨度是一些帖子。
它的CSS是：

span{
    width:150px;
    margin:1px;
    display:inline-block;
    float:left;
    background-color:#000;
}

我得到了这个结果：http://jsfiddle.net/5kPFJ/3

但我需要这样的结果：http://jsfiddle.net/56ybX/
我使用 <div> 和一些 CSS 来保持这些跨度最大。
但我需要这个没有<div> 标签的结果。
我该怎么办？

【问题讨论】：

考虑使用masonry 之类的东西。我一直在使用它，它非常好，而且正是这样做的！
正如@ruddy 正确指出的那样，这在纯CSS 中还不是普遍可行的。你确实需要一些 JS 库，masonry 是一个很受欢迎的库。
使用弹性盒子怎么样？如果您不关心支持 ie8/ie9，我认为这是可能的
正如@Ruddy 所说，您可以使用masonry 库。至少没有 div 是不可能做到这一点的。

标签： html css

【解决方案1】：

当你浮动一些东西时，你应该有某种包装器来保存列，它的显示变成块，所以跨度是块现在你不能做你想做的事。您应该使 3 列浮动，并在其中放置您的 span，容器可以是任何 html 元素，您可以使用 css 更改该元素的行为

【讨论】：

【解决方案2】：

您正在寻找这样的东西吗？ http://jsfiddle.net/oneeezy/5kPFJ/10/

请注意外部资源中包含的外部 reset.css 文件的使用，因为这是其工作原理的重要部分

HTML

<section class="flex-row">
    <article class="flex-col item1">
        <p class="item1">item1</p>
        <p class="item2">item2</p>
        <p class="item1">item1</p>
    </article>
    <article class="flex-col item1">
        <p class="item1">item1</p>
        <p class="item1">item1</p>
        <p class="item3">item3</p>
    </article>
    <article class="flex-col item1">
        <p class="item4">item4</p>
        <p class="item2">item2</p>
        <p class="item2">item2</p>
    </article>
    <article class="flex-col item1">
        <p class="item1">item1</p>
        <p class="item1">item1</p>
        <p class="item1">item1</p>
    </article>
</section>

CSS

section { width: 100%; height: 100%; padding: 1em; }
article { background: black; }
p { border: 1px solid white; padding: 1em; color: white; }

/* Flex Box */
.flex-col { display: flex; flex-flow: column; }
.flex-row { display: flex; flex-flow: row; }
.flex { display: flex; }
.item1 { flex: 1; }
.item2 { flex: 2; }
.item3 { flex: 3; }
.item4 { flex: 4; }

【讨论】：

对不起，但我看起来不像你给的那样.. 在 div 我输入了一些 span 不同高度和相同宽度的.但是 spans 应该在他们可以达到的最大值的顶部和左侧。我使用 float:left 将其保持在左侧。但我怎样才能让它保持在顶部

【解决方案3】：

试试这个。您将使用绝对位置和一些简单的数学运算。

span{
    position:absolute;
    width:150px;
    margin:1px;
}
span:nth-child(1){
    top:0;
    left:0;   
    background-color: red;
}

span:nth-child(2){
    top:65px;
    left:0px;   
    background-color: red;
}
span:nth-child(3){   
    top:160px;
    left:0px;   
    background-color: red;
}
span:nth-child(4){   
    top:0px;
    left:155px;   
    background-color: yellow;
}

span:nth-child(5){   
    top:50px;
    left:155px;   
    background-color: yellow;
}

span:nth-child(6){   
    top:115px;
    left:155px;   
    background-color: yellow;
}
span:nth-child(7){   
    top:0px;
    left:310px;   
    background-color: blue
}
span:nth-child(8){   
    top:60px;
    left:310px;   
    background-color: blue
}
span:nth-child(9){   
    top:125px;
    left:310px;   
    background-color: blue
}

工作演示：http://jsfiddle.net/5kPFJ/3/

【讨论】：