तत्व-प्रदर्शित होने पर न्यूनतम चौड़ाई और अधिकतम-चौड़ाई को अनदेखा किया जाता है: तालिका-कक्ष

Question

मैं CSS tables technique का उपयोग करके सरल तरल लेआउट करने की कोशिश कर रहा हूं, लेकिन इसमें एक बड़ी गड़बड़ी है जो मैंने पाया है: न्यूनतम चौड़ाई और अधिकतम टेबल-सेल डिस्प्ले वाले तत्वों पर -विड्थ को नजरअंदाज कर दिया जाता है।

क्या आप किसी भी कामकाज को जानते हैं जो मुझे यह निर्दिष्ट करने की अनुमति देगा कि निम्नलिखित उदाहरण में #sidebar तत्व कितना दूर हो सकता है?

एक्सएचटीएमएल:

<div id="wrapper"> 

    <div id="main"> 
    </div> 

    <div id="sidebar"> 
    </div> 

</div> 

सीएसएस:

#wrapper { 
display: table-row; 
border-collapse: collapse; 
} 

    #main { 
    display: table-cell; 
    } 

    #sidebar { 
    display: table-cell; 
    width: 30%; 
    min-width: 100px; /* does not work! */ 
    max-width: 310px; /* does not work! */ 
    } 

Answer 1

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

Answer 2

प्रत्येक div के अंदर एक और आवरण जोड़ें:

<div id="wrapper"> 

    <div id="main"> 
    <div class="inner"></div> 
    </div> 

    <div id="sidebar"> 
    <div class="inner"></div> 
    </div> 

</div> 

और उन पर *-width घोषणाओं डाल:

#sidebar div.inner { 
    min-width: 100px; 
    max-width: 300px; 
} 

Answer 3

मैं एक साइट है कि बाईं प्रदर्शित करता है के लिए उत्तरदायी डिजाइन से देख रहा हूँ - नीचे> सही और फिर और खुद को एक न्यूनतम चौड़ाई प्राप्त करना चाहते हैं। थोड़ा सा शोध करना मुझे लगता है कि यह इस सवाल का जवाब दे सकता है।

https://css-tricks.com/almanac/properties/m/max-width/