CSS keep elements maximum top and left

Question

Próbuję stworzyć stronę internetową z 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> 

Powyższe przęsła to niektóre posty.
I jego CSS jest:

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

Mam ten wynik: http://jsfiddle.net/5kPFJ/3

Ale muszę wynik takiego: http://jsfiddle.net/56ybX/
użyłem <div> z niektórych CSS, aby zachować te przęseł maksymalny szczyt.
Ale potrzebuję tego wyniku bez tagu <div>.
Co mam zrobić?

Answer 1

Szukasz czegoś takiego? http://jsfiddle.net/oneeezy/5kPFJ/10/

Proszę zwrócić uwagę na korzystanie z zewnętrznego pliku reset.css wchodzących w skład środków zewnętrznych, to duża część dlaczego to działa

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

Spróbuj tego. Będziesz grać z absolutną pozycją i prostą matematyką.

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 robocza: http://jsfiddle.net/5kPFJ/3/

Answer 3

trzeba mieć jakąś owijki do przechowywania kolumny, gdy unoszą się pewne rzeczy jest to wyświetlacz stać blok tak przęsła są blok teraz nie możesz robić, co chcesz. powinieneś wykonać 3 kolumny, a wewnątrz nich umieścić swoje przęsła, a pojemnik może być dowolnym elementem html, możesz zmienić zachowanie tego elementu za pomocą css