सवाल सीएसएस विभाजित चौड़ाई 100% से 3 कॉलम


मेरे पास लेआउट है जहां मेरे पास 3 कॉलम हैं। वहां मैं 100% से 100% विभाजित करता हूं।

नतीजा स्पष्ट रूप से 33.333 है ....

मेरे लक्ष्य है उत्तम स्क्रीन के 1/3

सवाल:

डॉट के बाद कितने संख्या चौड़ाई 1/3 चौड़ाई निर्दिष्ट करने के लिए सीएसएस हैंडल कर सकते हैं?

जैसे 33.33333  (n=5) <- कितने n सीएसएस संभाल सकते हैं

HTML:

<div id="wrapper">
    <div id="c1"></div>
    <div id="c2"></div>
    <div id="c3"></div>
</div>

सीएसएस:

#c1, #c2, #c3 {
    width: 33%; // 1/3 of 100%
}

यदि आप 3 से विभाजित करने के बेहतर तरीके जानते हैं तो मैं आपके सुझावों के लिए खुला हूं :)


44
2017-09-13 08:30


मूल


आप जिस divs की आवश्यकता है उसके लिए आप 33% का उपयोग कर सकते हैं और उनमें से प्रत्येक के बीच दो अतिरिक्त divs जोड़ सकते हैं, प्रत्येक 0,5% चौड़ा। इस तरह, divs समान रूप से आकार के होते हैं और आप फ्लोटिंग पॉइंट समस्याओं में भाग नहीं लेते हैं। - urzeit
मुझे लगता है कि यह धागा आपकी मदद करेगा। stackoverflow.com/questions/4308989/... - franchez
बस 33% दो बार और तीसरे 34% के लिए उपयोग करें - कोई भी पहचान नहीं पाएगा। बेशक बस मामले में, आप अपनी "पूर्णता" की मूल योजना से विचलित होना चाहते हैं - Joshua
सीएसएस की सैद्धांतिक परिशुद्धता अप्रासंगिक है: स्क्रीन केवल पूरे पिक्सल में खींची जा सकती है।
यहां बताया गया है सीएसएस में फ्लोटिंग पॉइंट नंबर पर एक दिलचस्प पोस्ट। ऐसा लगता है कि ब्राउज़र व्याख्या करने के लिए स्वतंत्र हैं, वास्तव में एक spec / मानक नहीं है। - Mathijs Flietstra


जवाब:


मुझे नहीं लगता कि सीएसएस में एकदम सही 1/3 मौजूद हो सकता है। मैं व्यक्तिगत रूप से करता हूं

#c1, #c2 {
    width: 33%; // 1/3 of 100%
}

#c3 {
    width: auto;
    //or width:34%;
}

16
2017-09-13 08:35



जैसा कि मैंने उपरोक्त लिखा है, मुझे चिंता है कि इस तरह के समाधान से समस्याएं पैदा हो सकती हैं। उदाहरण के लिए यदि कॉलम आईडी एक निश्चित चौड़ाई क्षेत्र का 33% है, तो कोई व्यक्ति अच्छी तरह फिट होने के लिए टेक्स्ट डिज़ाइन कर सकता है, लेकिन जब इसे व्यापक 34% कॉलम में ले जाया जाता है, तो टेक्स्ट लाइन गलत स्थानों में टूट सकती है। - Markus von Broady
चौड़ाई: 34% बिल्कुल गलत है। यह काम नहीं करेगा !!! - Ganesh Babu
यह काम नहीं करता। - Adam McCombs
मुझे विश्वास नहीं है कि यह हासिल करने का यह सही तरीका है। अनियमितता आंखों को सही नहीं मानती है, इससे अंतर आता है - Yann Chabot
@ बाबादेद क्यों चौड़ाई नहीं जा रहा है: कैल्क (100% / 3); ? - Yann Chabot


उपयोग सीएसएस  calc():

body {
  margin: 0;
}

div {
  height: 200px;
  width: 33.33%; /* as @passatgt mentioned in the comment, for the older browsers fallback */
  width: calc(100% / 3);
  display: inline-block;
}

div:first-of-type { background-color: red }
div:nth-of-type(2) { background-color: blue }
div:nth-of-type(3) { background-color: green }
<div></div><div></div><div></div>

JSFiddle


संदर्भ:


अद्यतन करें: जैसा कि यह 2018 है।, उपयोग करें flexbox - अब और नहीं inline-block  खाली स्थान के मुद्दे:

body {
  margin: 0;
}

#wrapper {
  display: flex;
  height: 200px;
}

#wrapper > div {
  flex-grow: 1;
}

#wrapper > div:first-of-type { background-color: red }
#wrapper > div:nth-of-type(2) { background-color: blue }
#wrapper > div:nth-of-type(3) { background-color: green }
<div id="wrapper">
  <div id="c1"></div>
  <div id="c2"></div>
  <div id="c3"></div>
</div>

या और भी सीएसएस ग्रिड यदि आप एक ग्रिड बना रहे हैं।

body {
  margin: 0;
}

#wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
}

#wrapper>div:first-of-type { background-color: red }
#wrapper>div:nth-of-type(2) { background-color: blue }
#wrapper>div:nth-of-type(3) { background-color: green }
<div id="wrapper">
  <div id="c1"></div>
  <div id="c2"></div>
  <div id="c3"></div>
</div>


75
2017-09-13 08:48



इस विधि के साथ समस्या यह है कि यह आईई 9 के नीचे कुछ भी समर्थित नहीं है। अगर यह केवल उन मशीनों पर आंतरिक रूप से उपयोग किया जा रहा है जो इसे समर्थन देते हैं तो यह ठीक है। यदि इसका उपयोग बड़े पैमाने पर उत्पादन में किया जा रहा है तो यह नहीं है। - BenM
यही कारण है कि मैंने रखा क्या में उपयोग कर सकता हूँ संपर्क। यदि ओपी को पुराने ब्राउज़र समर्थन की आवश्यकता नहीं है, calc ठीक काम करेगा (ए के लिए शुद्ध सीएसएस समाधान)। - Vucko
मुझे यह समाधान पता है, जैसे बेनम ने कहा, मैं अधिक क्रॉस-ब्राउज़र समाधान की तलाश में हूं। उदाहरण के लिए यह एंड्रॉइड में भी दिखाया जाएगा, क्योंकि मैं सीएएलसी फ़ंक्शन का उपयोग नहीं कर सकता। लेकिन आइडिया अच्छा है। +1 - Ing. Michal Hudak
चौड़ाई डालें: 33%; कैल्क चौड़ाई से पहले, यदि यह ब्राउज़र द्वारा समर्थित नहीं है, तो यह 33% समाधान पर गिर जाएगी जो लगभग अच्छा है। - passatgt
display: inline-block ग्रिड सिस्टम के लिए अच्छा नहीं है, अगर आपके पास अपने divs के बीच जगह है, तो आखिरी div अगली पंक्ति में जाती है। - ghanbari


CSS3 फ्लेक्स मॉडल का उपयोग करने के बारे में:

HTML कोड:

<div id="wrapper">
    <div id="c1">c1</div>
    <div id="c2">c2</div>
    <div id="c3">c3</div>
</div>  

सीएसएस कोड:

*{
    margin:0;
    padding:0;
}

#wrapper{
    display:-webkit-flex;
    -webkit-justify-content:center;

    display:flex;
    justify-content:center;

}

#wrapper div{
    -webkit-flex:1;
    flex:1;
    border:thin solid #777;

}

16
2017-09-13 10:37



इसका भयानक दुष्प्रभाव है कि जब आप पंक्तियों के साथ काम कर रहे होते हैं और आप असमान संख्या के साथ समाप्त होते हैं, तो यह अंतिम पंक्ति को 100% तक फैलाएगा :) - NoobishPro


का उपयोग करते हुए यह मूर्ख, आप के साथ खेल सकते हैं width प्रत्येक div का। मैंने क्रोम और आईई दोनों में कोशिश की है और मुझे चौड़ाई में अंतर दिखाई देता है 33% तथा 33.3%। मैं भी बीच में एक बहुत छोटा अंतर नोटिस 33.3% तथा 33.33%। मुझे इससे कोई फर्क नहीं पड़ता है।

के बीच भिन्नता 33.33% और सैद्धांतिक 33.333...% एक मात्र है 0.00333...%

तर्क के लिए, मेरी स्क्रीन चौड़ाई कहें 1960px; एक काफी उच्च लेकिन आम संकल्प। इन दो चौड़ाई के बीच का अंतर अभी भी है 0.065333...px

तो, दो दशमलव स्थानों से आगे, परिशुद्धता में अंतर नगण्य है।


8
2017-09-13 09:07





यदि आप सोचते हैं, में बूटस्ट्रैप टेम्पलेटिंग सिस्टम (जो बहुत सटीक है), यहां बताया गया है कि जब आप कक्षा लागू करते हैं तो कॉलम को विभाजित करते हैं .col-md-4 (12 कॉलम सिस्टम का 1/3)

सीएसएस

.col-md-4{
    float: left;
    width: 33.33333333%;
}

मैं फ्लोट का प्रशंसक नहीं हूं, लेकिन यदि आप वास्तव में अपने तत्व को अपने पृष्ठ के 1/3 के बारे में चाहते हैं, तो आपके पास कोई विकल्प नहीं है क्योंकि कभी-कभी जब आप इनलाइन-ब्लॉक तत्व का उपयोग करते हैं, तो ब्राउज़र आपके स्थान पर विचार कर सकता है एचटीएमएल एक 1 पीएक्स स्पेस के रूप में जो आपके पूर्ण 1/3 को तोड़ देगा। उम्मीद है कि यह मदद की!


6
2018-05-01 15:17





बस अगर कोई अभी भी जवाब की तलाश में है,

ब्राउज़र को इसका ख्याल रखने दें। इसे इस्तेमाल करे:

  • display: table कंटेनर तत्व पर।
  • display: table-cell बाल तत्वों पर।

ब्राउजर समान रूप से इसे विभाजित करेगा कि आपके पास 3 या 10 कॉलम हैं या नहीं।

संपादित करें

कंटेनर तत्व में भी होना चाहिए: table-layout: fixed अन्यथा ब्राउज़र प्रत्येक तत्व की चौड़ाई निर्धारित करेगा (अधिकांश समय वह बुरा नहीं है)।


5
2018-02-20 18:29





इस समस्या को ठीक करने के लिए बस एक वैकल्पिक तरीका प्रस्तुत करने के लिए (यदि आप वास्तव में आईई का समर्थन करने की परवाह नहीं करते हैं):

एक मुलायम कोडित समाधान का उपयोग करना होगा display: table (आईई 7 में कोई समर्थन नहीं) के साथ table-layout: fixed (बराबर चौड़ाई कॉलम सुनिश्चित करने के लिए)।

इसके बारे में और पढ़ें यहाँ


2
2017-09-13 09:19





मैंने पाया है 6 दशमलव स्थान 1/3 के लिए कभी-कभी एक सही परिणाम लौटने के लिए कभी-कभी (कम से कम क्रोम में) आवश्यक होता है।

उदा।, 1140 पीएक्स / 3 = 380 पीएक्स

यदि आपके पास 1140 कंटेनर के भीतर 3 तत्व थे, तो क्रोम के इंस्पेक्टर टूल से पहले उन्हें 380px पर दिखाए जाने से पहले उन्हें चौड़ाई सेट 33.333333% की आवश्यकता होगी। दशमलव स्थानों की कोई भी कम मात्रा, और क्रोम कम चौड़ाई देता है 379.XXXपिक्सल


1
2018-03-16 16:47





2018 अद्यतन यह वह तरीका है जिसका मैं उपयोग करता हूं width: 33%;  width: calc(33.33% - 20px); पहला 33% उन ब्राउज़रों के लिए है जो चौड़ाई की संपत्ति के अंदर कैल्क () का समर्थन नहीं करते हैं, दूसरे को सबसे अच्छा संभव क्रॉस-ब्राउज़र समर्थन के लिए -webkit- और -moz- के साथ प्रीफ़िक्स्ड विक्रेता होना चाहिए।

#c1, #c2, #c3 {
    margin: 10px; //not needed, but included to demonstrate the effect of having a margin with calc() widths/heights
    width: 33%; //fallback for browsers not supporting calc() in the width property
    width: -webkit-calc(33.33% - 20px); //We minus 20px from 100% if we're using the border-box box-sizing to account for our 10px margin on each side.
    width: -moz-calc(33.33% - 20px);
    width: calc(33.33% - 20px);
}

अपने मार्जिन के लिए टीएल खाता;


0
2018-05-30 06:54





मुझे नहीं लगता कि आप इसे सीएसएस में कर सकते हैं, लेकिन आप जावास्क्रिप्ट के साथ एक पिक्सेल सही चौड़ाई की गणना कर सकते हैं। मान लें कि आप jQuery का उपयोग करते हैं:

HTML कोड:

<div id="container">
   <div id="col1"></div>
   <div id="col2"></div>
   <div id="col3"></div>
</div>

जेएस कोड:

$(function(){
   var total = $("#container").width();
   $("#col1").css({width: Math.round(total/3)+"px"});
   $("#col2").css({width: Math.round(total/3)+"px"});
   $("#col3").css({width: Math.round(total/3)+"px"});
});

-1
2017-09-13 08:40



यदि कंटेनर चौड़ाई 100px थी तो यह अभी भी काम नहीं करेगा क्योंकि माइक डब्ल्यू ने इंगित किया है कि आप केवल पूर्ण पिक्सेल में माप सकते हैं। - BenM
मैंने कहा "पिक्सेल सही"। बेशक आप कभी भी 3 में पिक्सेल काटने में सक्षम नहीं होंगे ... लेकिन इस समाधान के साथ, प्रत्येक divs में एक ही अधिकतम चौड़ाई होगी। - Scalpweb
आह पिक्सेल सही की मेरी समझ तब गलत थी! मुझे अब तुम्हारा क्या मतलब है। - BenM
इससे उन्हें अवसर पर लपेटने का मौका मिलेगा .roundआईएनजी ऊपर जाता है।.floor इसे रोक देगा। - Brook Jordan
div के ब्लॉक स्तर तत्व हैं, इसलिए हमें उन्हें पहले इनलाइन ब्लॉक बनाने की आवश्यकता है - zakir