I CSS mantengono gli elementi al massimo in alto ea sinistra

Question

Sto provando a creare un sito Web con 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> 

Gli span sopra sono alcuni post.
E il suo CSS è:

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

ho ottenuto questo risultato: http://jsfiddle.net/5kPFJ/3

Ma ho bisogno di un risultato come questo: http://jsfiddle.net/56ybX/
ho usato <div> con alcuni CSS per mantenere questi campate massima superiore.
Ma ho bisogno di questo risultato senza il tag <div>.
Cosa devo fare?

Answer 1

Stai cercando qualcosa di simile? http://jsfiddle.net/oneeezy/5kPFJ/10/

Si prega di notare l'uso di un file reset.css esterni di partecipare a delle risorse esterne in quanto è una grande parte del motivo per cui questo funziona

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 2

Prova questo. Giocherai con la posizione assoluta e con qualche semplice matematica.

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 
} 

demo di lavoro: http://jsfiddle.net/5kPFJ/3/

Answer 3

si dovrebbe avere una sorta di involucro di tenere la colonna quando si fa galleggiare qualche cosa che sia visualizzazione diventato blocco in modo campate sono blocco ora non si può fare quello che vuoi. dovresti rendere 3 colonne float e al loro interno mettere i tuoi span e il container può essere un qualsiasi elemento html puoi cambiare il comportamento di quell'elemento con css