मैं अपनी सामग्री divs को फेसबुक टाइमलाइन के समान तरीके से कैसे रखूं?

मुझे वह लेआउट पसंद है जो फेसबुक टाइमलाइन के दो कॉलम पोस्टों के साथ है। मैंने मानक div एस और फ्लोट के साथ एक ही लेआउट बनाने की कोशिश की है। एक तरफ तैरते समय फ्लोट अच्छी तरह से काम करते हैं, लेकिन दूसरे के लिए नहीं। ध्यान में रखते हुए कि कई ऊंचाइयों के ब्लॉक हैं, आप कैसे सुझाव देते हैं कि मैं इस लेआउट से सबसे अच्छा निपटान करता हूं? इसका उपयोग ब्लॉग के लिए किया जाएगा, और मुझे पता है कि किसी ने इस पर एक वर्डप्रेस टेम्पलेट बनाया है, लेकिन लेआउट को अपने सबसे सरल रूप में डिस्टिल करना संभव है? मेरी टाइमलाइन और वर्डप्रेस टेम्पलेट पर क्रोम की डेवलपर विंडो का उपयोग करने के बाद, मैं उपयुक्त सीएसएस कोड खोजने के लिए संघर्ष कर रहा हूं और मदद की ज़रूरत है।मैं अपनी सामग्री divs को फेसबुक टाइमलाइन के समान तरीके से कैसे रखूं?

मैं jsFiddle के रूप में जो रखता हूं उसे रखूंगा। यदि आपको सुनिश्चित करने के लिए उनकी आवश्यकता है तो मैंने अतिरिक्त ब्लॉक जोड़े हैं।

स्रोत

2011-11-19 Nathan Bunn

इस कारण से मैं तालिकाओं का उपयोग न करने की सलाह देता हूं ... इस तालिका में उपयोग करके इसे हल किया जा सकता है। – Purag

हालांकि, एक तालिका के साथ, मुझे प्रत्येक ब्लॉक ऊंचाई पर विशिष्ट नियंत्रण की आवश्यकता है। अगर मैं पहले से प्रत्येक ब्लॉक की ऊंचाई जानता था, तो मैं पाउंड के रूप में ध्वनि के रूप में होगा। चूंकि मैं नहीं करता, क्योंकि यह एक ब्लॉग के लिए होगा, एक टेबल का उपयोग करने से संभावित रूप से और अधिक समस्याएं हो सकती हैं, यहां तक कि रोशन के साथ भी। मुझे प्रवाह करने के लिए तरल पदार्थ होने की आवश्यकता है। मैंने जो उदाहरण पोस्ट किया है वह 5 ब्लॉक करने के लिए काम करता है और इसके पीछे कुछ भी तैरने की इजाजत नहीं देता है। –

[यहां] (http://www.portablehtml.com/2012/09/how-to-build-facebook-timeline-with.html) jquery, dust.js और webf का उपयोग कर एक और समयरेखा कार्यान्वयन है –

आपको बाईं तरफ के कंटेनर फ़्लोट किए गए हैं और बाएं साफ़ कर दिए गए हैं और दाईं ओर वाले दाईं ओर फ़्लोट किया गया है और दाईं ओर साफ़ किया गया है। आप इसे जावास्क्रिप्ट या जो भी सर्वर सर्वर भाषा का उपयोग करते हैं, उसके साथ कर सकते हैं। jquery में कुछ जल्दी इस तरह होगा।

(एक पूरा बेला .. http://jsfiddle.net/gK2Vn/ मैं प्रश्न के नंगे हड्डियों के लिए जा रहा था ..)

.item { 
    float: left; 
    clear: left; 
} 
.item.right { 
    float: right; 
    clear: right; 
} 

var left_column_height = 0; 
var right_column_height = 0; 
var items = $('.item'); 
for (var i = 0; i < items.length; i++) { 
    items.eq(i).height(Math.floor(Math.random() * 100) + 10); 
    if (left_column_height > right_column_height) { 
     right_column_height+= items.eq(i).addClass('right').outerHeight(true); 
    } else { 
     left_column_height+= items.eq(i).outerHeight(true); 

    } 
}

स्रोत

2011-11-19 02:09:48 Mark