सीएसएस

Question

का उपयोग कर कई पंक्तियों में तत्व प्रदर्शित करना मेरे पास एक निश्चित चौड़ाई कंटेनर <div> है जो एक या अधिक विजेट <div> एस प्रदर्शित करता है। मैं इसे इस तरह दिखना चाहते हैं:

< - ग्रे रंग के ब्लॉक विगेट्स कर रहे हैं, लाल बॉर्डर कंटेनर

सरलीकृत है, HTML में मेरी संरचना इस तरह दिखता है:

<div id="container"> 
    <div id="widget1">1</div> 
    <div id="widget2">2</div> 
    <div id="widget3">3</div> 
    <div id="widget4">4</div> 
    <div id="widget5">5</div> 
    <div id="widget6">6</div> 
    <div id="widget7">7</div> 
</div> 

विचार

1. विजेट्स की निश्चित ऊंचाई होगी 100px
2. विजेट्स की एक निश्चित चौड़ाई होगी उदा। 100px लेकिन वे उस चौड़ाई के एकाधिक भी हो सकते हैं (साथ ही कोई भी मार्जिन पार हो गया - विजेट देखें 1)
3. विजेट मार्जिन (या समान) के साथ अच्छी तरह से दूरी पर होना चाहिए उदा। 10px
4. मुझे नहीं पता कि कितने विजेट होंगे (उपयोगकर्ता कंटेनर को जितना चाहें उतने या कम असाइन कर सकते हैं)।
5. कंटेनर एक निश्चित चौड़ाई है लेकिन इसमें कोई "दृश्य" स्टाइल नहीं है (प्रदर्शन के लिए लाल सीमा है)
6. समाधान आधुनिक ब्राउज़र (और एमएसआईई 7) में काम करना है और आदर्श रूप से शुद्ध सीएसएस होगा।

विचार के कारण 4. मैं अतिरिक्त मार्कअप निर्दिष्ट नहीं कर सकता पंक्ति div, कक्षाएं (। पहला बच्चा, .last-child) और के कारण 2.:nth-child AFAIK काम नहीं करेगा।

बातें मैं कोशिश की है

मार्जिन छोड़ दिया :first-child की स्थापना margin-left: 0 एक नई पंक्ति ठीक से प्रदर्शित नहीं होगा साथ विगेट्स पर।

:last-child सेटिंग margin-right: 0 के साथ विगेट्स पर मार्जिन-दाएं पहली पंक्ति कंटेनर div wider और last-child isn't supported until MSIE9 को मजबूर करती है।

बराबर बाएं और दाएं मार्जिन (उदा। मार्जिन: 0 5 पीएक्स 10 पीएक्स) कंटेनर को दोबारा मजबूर करता है।

अतिप्रवाह - मेरे सिर में बहुत अच्छा काम करता है! मार्जिन या पैडिंग के साथ इतना ज्यादा नहीं।

क्या सीएसएस में ऐसा करने का कोई तरीका है?

http://jsfiddle.net/agtb/VHXGT/

Answer 1

छोड़ दिया मेरा मानना ​​है कि आप बहुत ज्यादा जटिल :-)

सोच रहे हैं, तो मैं तुम्हें सही ढंग से समझ आपको अलग विगेट्स के किसी भी विशेष हैंडलिंग की आवश्यकता नहीं है। बस विगेट्स को आधा रिक्ति के चारों ओर मार्जिन दें, और कंटेनर एक ही मार्जिन लेकिन नकारात्मक है।

#container { 
    width: 440px; 
    margin: -5px; 
} 

#container div { 
    background-color: gray; 
    height: 100px; 
    width: 100px; 
    float: left; 
    margin: 5px; 
} 

http://jsfiddle.net/SGdG3/1/

समस्या मैं लेआउट छवि में दिखाया गया है को प्राप्त करने

Answer 2

सेट कंटेनर चौड़ाई 400 और पहली div चौड़ाई 200 नाव छोड़ दिया है, आराम चौड़ाई 100 नाव