उत्तरदायी डिजाइन में प्रदर्शन संपत्ति के साथ 'टेबल' और 'टेबल-सेल' का उपयोग करना?

Question

मैं बच्चे के तत्वों पर कंटेनर पर display: table; और display: table-cell; उपयोग कर रहा हूँ, एक पृष्ठ पर क्षैतिज कुछ पदों पर प्रकाश डाला।

बात यह है कि मुझे कोई जवाब नहीं है कि उन्हें कैसे उत्तरदायी बनाना है, यानी स्क्रीन आकार छोटा हो जाता है, प्रत्येक बच्चे (यानी table-cell) क्षैतिज रूप से गठबंधन जारी रखने के दौरान आनुपातिक रूप से छोटा होना चाहिए।

मैं यह कैसे कर सकता हूं?

• उदाहरण कोड: http://www.codepen.io/anon/pen/dCLgq
• डेमो: http://codepen.io/anon/full/dCLgq

Answer 1

आंतरिक कंटेनर पेज के साथ नीचे पैमाने पर करने के लिए, आप कंटेनर div की चौड़ाई 100% करने के लिए सेट कर सकते हैं: में

अपने उदाहरण:

#the-big-stories { 
    display: table; 
    table-layout: fixed; 

    /** add 100% width **/ 
    width:100%; 
} 

आगे, यदि आप बच्चे के कंटेनर के साथ छवियों पैमाने पर करने, बस उन्हें width: 100%;height:auto;

साथ भी मिल चाहते हैं, वे अपने codepen नीचे काँटेदार:

http://codepen.io/braican/pen/xCmsw

आप शायद मीडिया का उपयोग करना होगा सचमुच अच्छी तरह से अच्छी तरह से खेलने के लिए अंदर सामान प्राप्त करने के लिए प्रश्न, लेकिन कंटेनर ब्राउज़र के साथ स्केल करेगा, जैसा कि आंतरिक div है।