सीएसएस में संख्यात्मक ऑपरेशन की अनुमति है?

Question

उदाहरण के लिए, width: 50% + 10px; सीएसएस में कानूनी है?

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

Answer 1

नहीं। यदि आप सीएसएस में गणित चाहते हैं, तो SASS या LESS देखें।

और यदि आप कम (या SASS) का उपयोग करने जा रहे हैं, और आप समान दूरी वाले कॉलम चाहते हैं, Bootstrap responsive आपको जो चाहिए उसे लगता है।

Answer 2

आप कोशिश कर सकते हैं calc

selector{ 
    width: -moz-calc(50% + 10px); 
    width: -webkit-calc(50% + 10px); 
    width: calc(50% + 10px); 
} 

Answer 3

इस पिछले पोस्ट देखें: Is it possible to do mathematics inside CSS?

यह सीएसएस से सीधे संभव नहीं है। लेकिन कोई भी उपयोग कर सकता है, उदाहरण के लिए, कम। या आप इसे गतिशील करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं।

लेकिन चूंकि यह स्क्रीन की गणना करना है, इसलिए इस बात पर ध्यान दें कि क्या श्वसन डिजाइन है। इसके लिए पहले से ही कई ढांचे हैं। मैं यह नहीं कहूंगा कि कोई दूसरों के मुकाबले बेहतर है .. लेकिन http://designpin.co/5-responsive-web-design-frameworks/

पर एक नज़र डालें और देखें कि आपकी ज़रूरतों के अनुरूप क्या है।

Answer 4

ऐसा लगता है क्या तुम सच में की जरूरत मार्जिन है जैसे:

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

.colItem { float: left; margin-right: 10px; } 

आपका चौड़ाई शायद नहीं वास्तव में 50% उस स्थिति में, होना चाहिए एक दूसरे के बगल में बैठे के रूप में दो कॉलम सब कुछ (50% + 50% + 20px मार्जिन> 100%) रूण होगा। आप वास्तव में 10px नहीं चाहते हैं, लेकिन 1% या कुछ।() `लेकिन ब्राउज़र समर्थन खरोंच करने के लिए नहीं है

.colItem 
{ 
    float: left; 
    width: 50%; 
    box-sizing: border-box; 
    -moz-box-sizing:border-box; 
    padding-right: 10px; 
} 
.colItem.last 
{ 
    padding-right: 0px; 
}