Question

我正在尝试用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>标签我该怎么办？

Answer 1

当你浮动某些东西时，你应该有一种包装来保持柱子，它的显示会变成块状，所以跨度就会阻挡，你现在无法做你想做的事情。你应该使3列浮动，并在其中放置你的跨度，容器可以是任何html元素，你可以用css改变该元素的行为

Answer 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; }

Answer 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/

CSS保持元素最大值左上角

3 个答案: