2012-02-03 27 views
5

मैं एक द्रव लेआउट और पाठ के अनुरूप में चौड़ाई बक्से तय कर दी है: उन्हें इस पोस्ट समाधान के साथ का औचित्य साबित:द्रव चौड़ाई गठबंधन छोड़ दिया

Fluid width with equally spaced DIVs

लेकिन चूंकि मैं एक जोड़ी एक उत्तरदायी लेआउट में और पंक्तियों का।

बेशक यह है होता है:

------ ------ ------ ------  
| | | | | | | |  
| | | | | | | | 
------ ------ ------ ------  
------ ------ ------ ------  
| | | | | | | |  
| | | | | | | | 
------ ------ ------ ------  
------   ------  ------  
| |   | |  | | 
| |   | |  | | 
------   ------  ------ 

लेकिन मैं इस तरह यह करना चाहते:

------ ------ ------ ------  
| | | | | | | |  
| | | | | | | | 
------ ------ ------ ------  
------ ------ ------ ------  
| | | | | | | |  
| | | | | | | | 
------ ------ ------ ------  
------ ------ ------ 
| | | | | | 
| | | | | | 
------ ------ ------ 

बेशक औचित्य साबित यह काम है करता है लेकिन वहाँ के लिए जावास्क्रिप्ट का उपयोग किए बिना इस के लिए एक समाधान है यह करो?

मैंने सोचा कि पाठ-संरेखण-आखिरी: बाएं काम कर सकते हैं, लेकिन यह नहीं है और यह अभी तक आधिकारिक ईथर नहीं है। एक संभव समाधान के लिए

विचार:

मैं एक संभव जावास्क्रिप्ट समाधान के साथ आया था, लेकिन मुझे लगता है कि के लिए आपकी मदद की जरूरत है।

यहाँ एक संभव समाधान के लिए मेरा विचार है:

अंतिम पंक्ति बाईं गठबंधन हम वास्तव में अदृश्य बक्से के साथ उन लोगों के लापता रिक्त स्थान को भरने के लिए की आवश्यकता होगी पाने के लिए। हम आसानी से हाथ से ऐसा कर सकते हैं लेकिन divs की संख्या उपयोगकर्ता उत्पन्न होती है और हमेशा अलग होती है। बक्से कि याद कर रहे हैं की संख्या जानते हैं और उन्हें उन हम पहले से ही है करने के लिए संलग्न करने के लिए

तो घास की जरूरत है, यह काम करने के लिए:

तो यहाँ मेरी (शिशु) srcipting विचार है:

1. Count all divs 
2. Divide them with 4 (cause we have 4 in a row) 
3. If the SolutionA has no decimal, nothing will happen cause all is good 
4. If the SolutionA has a decimal, remove it 
5. SolutionA + 1 = SolutionB 
6. SolutionB x 4 (cause we have 4 each in a row) = SolutionC 
7. SolutionC - SolutionA = Number of divs we need to add. 

मुझे नहीं पता कि जावास्क्रिप्ट को पास करने के लिए कितनी वस्तुएं पहले से ही एक पंक्ति में हैं या नहीं। यह अच्छा कारण होगा, तो फॉर्मूलेर ब्राउज़र चौड़ाई के साथ प्रत्येक बार जब भी पंक्ति संख्या समायोजित किए बिना उत्तरदायी लेआउट के लिए काम करेगा।

क्या यह एक अच्छा विचार है?

मुझे उम्मीद है कि कुछ ऐसा करना चाहते हैं। http://jsfiddle.net/L2mPf/

धन्यवाद:

यहाँ एक बेला के साथ काम करने के लिए।

मेरा उत्तर परे देखें।

+0

क्या आप टेबल का उपयोग कर सकते हैं? –

+0

दुर्भाग्य से divs उपयोगकर्ता द्वारा उत्पन्न नहीं होने का कारण बनता है। Divs की संख्या किसी भी संख्या हो सकती है। – Melros

+0

यदि आप कॉलम की संख्या जानते हैं और निश्चित ऊंचाई और ब्राउज़र संगतता एक बड़ी समस्या नहीं है तो आप सीएसएस कॉलम –

उत्तर

7

ठीक है, यहाँ सीएसएस के साथ लानत आसान उपाय है:

आप (इस मामले में 4 में) एक पंक्ति में कितने होगा के इतने divs जोड़ने और उन्हें एक देना 1 पीएक्स की ऊंचाई।

कुछ भी देखने के लिए और जावास्क्रिप्ट के बिना आकर्षण जैसे सभी काम करता है।

यहाँ नए बेला है: मुझे सीएसएस और इस समाधान पर ध्यान केंद्रित कर वापस लिए @GGG को http://jsfiddle.net/L2mPf/1/

धन्यवाद।

+0

जेएफटीआर, प्रासंगिक बातचीत - http://chat.stackoverflow.com/transcript/message/2551787#2551787 –

+0

धन्यवाद, आपने मुझे अपने बालों को खींचने से बचाया –

+0

आपका स्वागत है! यहां एक लेख भी है जो समझाता है कि मैं इस पीठ के साथ क्या हासिल करना चाहता था: http://www.barrelny.com/blog/text-align-justify-and-rwd/ – Melros

0

आपको बक्से के लिए ऊंचाई निर्दिष्ट करने की आवश्यकता है। अपने मामले में अभी बक्से की सामग्री अलग-अलग हो सकती है क्योंकि बक्से गठबंधन नहीं आ रहे हैं।

+0

यह मेरा मतलब नहीं है। मैंने अपना प्रश्न संपादित किया। – Melros

0

आपके सीएसएस में आपके बक्से के लिए एक न्यूनतम ऊंचाई निर्धारित करें।

.box-class { 
    min-height: 100px; 
    height: auto !important; 
    height: 100px; 
} 

100px उदाहरण के लिए है और IE6

के लिए एक मिनट ऊंचाई ठीक

आप भी छोड़ दिया फ्लोट करने के लिए चाहते हो सकता है (और प्रदर्शन ब्लॉक) अपने बक्से और फिर clearfix पैरेंट कंटेनर रखने के लिए यह करता है, तो खुला शामिल संरेखण मुद्दा बनी रहती है। (लिंक में clearfix सीएसएस का उदाहरण)

+0

यह मेरा मतलब नहीं है। मैंने अपना प्रश्न संपादित किया। – Melros

संबंधित मुद्दे