CSS giữ các phần tử ở trên cùng bên trái và bên trái

Question

Tôi đang cố gắng tạo một trang web bằng 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> 

Các khoảng trên đây là một số bài đăng.
Và CSS của nó là:

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

tôi có kết quả này: http://jsfiddle.net/5kPFJ/3

Nhưng tôi cần một kết quả như thế này: http://jsfiddle.net/56ybX/
tôi đã sử dụng <div> với một số CSS để giữ những nhịp đầu tối đa.
Nhưng tôi cần kết quả này mà không cần thẻ <div>.
Tôi nên làm gì?

Answer 1

Bạn đang tìm kiếm một cái gì đó như thế này? http://jsfiddle.net/oneeezy/5kPFJ/10/

Xin lưu ý việc sử dụng một file reset.css bên ngoài được bao gồm trong các nguồn lực bên ngoài vì nó là một phần quan trọng của lý do tại sao các công trình này

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

Hãy thử điều này. Bạn sẽ chơi với vị trí tuyệt đối và một số phép toán đơn giản.

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 
} 

bản demo làm việc: http://jsfiddle.net/5kPFJ/3/

Answer 3

bạn nên có một số loại wrapper để giữ cột khi bạn nổi một số điều đó là hiển thị trở thành khối để các nhịp là khối bây giờ bạn không thể làm những gì bạn muốn. bạn nên tạo 3 cột nổi và bên trong chúng đặt các nhịp của bạn và vùng chứa có thể là bất kỳ phần tử html nào mà bạn có thể thay đổi hành vi của phần tử đó bằng css