सीएसएस तत्वों को अधिकतम शीर्ष और बाएं

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> 

ऊपर दिए गए स्पैन कुछ पोस्ट हैं।
और इसकी सीएसएस है:

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

मैं इस परिणाम मिला: http://jsfiddle.net/5kPFJ/3

लेकिन मैं इस तरह एक परिणाम की जरूरत है: http://jsfiddle.net/56ybX/
मैं कुछ सीएसएस के साथ <div> इस्तेमाल किया इन फैला अधिकतम शीर्ष रखने के लिए।
लेकिन मुझे <div> टैग के बिना इस परिणाम की आवश्यकता है।
मुझे क्या करना चाहिए?

Answer 1

क्या आप इस तरह कुछ ढूंढ रहे हैं? http://jsfiddle.net/oneeezy/5kPFJ/10/

कृपया ध्यान दें एक बाहरी reset.css फ़ाइल के उपयोग बाह्य संसाधनों में शामिल किए जाने के रूप में यह कारण है कि इस काम करता है

एचटीएमएल

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

सीएसएस

का एक बड़ा हिस्सा है

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

इसे आजमाएं। आप स्थिति पूर्ण और कुछ सरल गणित के साथ खेलेंगे।

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/

Answer 3

जब आप कुछ बात यह प्रदर्शन बन ब्लॉक है, तो फैला ब्लॉक कर रहे हैं अब आप आप क्या चाहते हैं नहीं कर सकते तैरने लगते हैं आप आवरण किसी तरह का स्तंभ धारण करने के लिए होना चाहिए। आपको 3 कॉलम फ्लोट करना चाहिए और अंदर उनके स्पैन डालें और कंटेनर कोई HTML तत्व हो सकता है, आप उस तत्व के व्यवहार को सीएसएस