Html CSS保持元素的最大顶部和左侧

我正在尝试用PHP制作一个网站

上面的跨度是一些立柱。
它的CSS是：

span{
宽度：150px；
保证金：1px；
显示：内联块；
浮动：左；
背景色：#000；
}

我得到了这个结果：

但我需要这样的结果：
我在一些CSS中使用了

，以保持这些跨度最大。
但是我需要不带

标记的结果。

---

我该怎么办？

你在找这样的东西吗？

请注意外部资源中包含的外部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>

---

试试这个。你将玩绝对位置和一些简单的数学

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
}

---

工作演示：

当您浮动某些内容时，您应该使用某种包装器来保存该列，它的显示将变为块，因此跨距现在变为块，您无法执行您想要的操作。您应该使3列浮动，并在其中放置跨距，容器可以是任何html元素，您可以使用css改变该元素的行为。我一直在使用它，它非常好，而且确实做到了这一点！正如@ruddy正确指出的，这在纯CSS中还不是普遍可行的。你确实需要一些JS库，砌体是一个很受欢迎的库。使用flexbox怎么样？如果您不关心支持ie8/ie9，我认为这是可能的，正如@Ruddy所说的，您可以使用砌体库。至少在没有div的情况下是不可能做到这一点的。对不起，我看起来不像你给我的。。在一个div中，我输入了一些不同高度和相同宽度的跨距。但跨度应达到顶部和左侧的最大值。。我使用float:left来保持它的左侧。但我怎样才能保持最高水平呢

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
}