क्या "चौड़ाई: -मोज़-फिट-कंटेंट?" के लिए सीएसएस क्रॉस-ब्राउज़र मान है?

Question

मुझे एक ही समय में कुछ divs को केंद्र-स्थित होने और उनकी सामग्री की चौड़ाई फिट करने की आवश्यकता है ।

मैं अब इसे इस तरह से कर रहा हूं:

.mydiv-centerer{

  text-align: center;

  .mydiv {
    background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #0099FF;
    color: white;
    margin: 10px auto;
    padding: 10px;
    text-align: justify;
    width: -moz-fit-content;
  }
}

अब, अंतिम कमांड "चौड़ाई: -मोज़-फिट-कंटेंट;" है वास्तव में मैं क्या जरूरत है!

केवल समस्या है .. यह केवल फ़ायरफ़ॉक्स पर काम करता है।

मैंने "प्रदर्शन: इनलाइन-ब्लॉक;" , लेकिन मुझे इन डिवो को डिव की तरह व्यवहार करने की आवश्यकता है। अर्थात्, प्रत्येक अगला div अंडर होना चाहिए , और इनलाइन नहीं , पिछला।

क्या आप किसी भी संभावित क्रॉस-ब्राउज़र समाधान को जानते हैं?

Comments

इनमें से किसी एक उत्तर को आज़माएँ: stackoverflow.com/questions/5803030/…

— मैट एच

चोम fit-contentअब समर्थन करता है।

— LinuxDisciple

Answer 1

अंत में मैंने इसे बस उपयोग करके तय किया:

display: table;

Comments

मुझे यहाँ आपके प्रश्न के समान शब्दों की तलाश थी। मैंने किया display: tableऔर margin: autoएक केंद्र के लिए form। महान! : डी

— लेनियल मैकाफेर्री

इसके साथ ही, मुझे श्वेत-स्थान का उपयोग करना पड़ा: पूर्व-महत्वपूर्ण;

— बिमल दास

कुछ विशेषताओं का सम्मान नहीं करता है, जैसे max-width: 100%।

— डैनियल

Answer 2

मोज़िला का MDN निम्नलिखित कुछ सुझाव देता है [ स्रोत ]:

 p {
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

Comments

क्या आप चौड़ाई को दो बार निर्दिष्ट कर सकते हैं जैसा आपने पी स्टाइलिंग के लिए किया था? चौड़ाई की तरह: आंतरिक; / * सफ़ारी / वेबकीट एक गैर-मानक नाम / चौड़ाई का उपयोग करता है : -मोज़-अधिकतम-सामग्री; / फ़ायरफ़ॉक्स / गेको * /

— सागर भोसले

-moz-max-contentकेवल इसके समतुल्य है -moz-fit-contentजबकि मूल तत्व व्यापक है। -moz-fit-contentसामग्री को फिट करेगा और पाठ को लपेटेगा, लेकिन -moz-max-contentमूल तत्व के बाहर विस्तार करेगा। एक ही Chrome की के लिए लागू होता है -webkit-max-contentऔर fit-content।

— लिनक्सडिसिपल

जोड़ना मत भूलना width: max-content;।

— टोबियास टेंगलर

Answer 3

इसी तरह के मामले में मैंने इस्तेमाल किया: white-space: nowrap;

Comments

इसने ड्रॉप-डाउन की सामग्री के अतिप्रवाह के साथ मेरे मुद्दे को ठीक कर दिया। धन्यवाद!

— ज़च लीटन

Answer 4

क्या कोई एकल घोषणा है जो इसे वेबकिट, गेको और ब्लिंक के लिए ठीक करती है? नहीं। हालांकि, कई लेआउट संपत्ति मूल्यों को निर्दिष्ट करके एक क्रॉस-ब्राउज़र समाधान है जो प्रत्येक लेआउट इंजन के सम्मेलन के अनुरूप है।

.mydiv {  
  ...
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  ...
}

से अनुकूलित: एमडीएन

Answer 5

मैं इनका उपयोग करता हूं:

.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}

Answer 6

width: intrinsic;           /* Safari/WebKit uses a non-standard name */
width: -moz-max-content;    /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */

Answer 7

क्यों कुछ brएस का उपयोग नहीं ?

<div class="mydiv-centerer">
    <div class="mydiv">Some content</div><br />
    <div class="mydiv">More content than before</div><br />
    <div class="mydiv">Here is a lot of content that
                       I was not anticipating</div>    
</div>

सीएसएस

.mydiv-centerer{
    text-align: center;
}

.mydiv{
    background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #0099FF;
    color: white;
    margin: 10px auto;
    padding: 10px;
    text-align: justify;
    display:inline-block;
}

उदाहरण: http://jsfiddle.net/YZV25/

Comments

बहुत-बहुत धन्यवाद, यह काम करता है, लेकिन डिव के बीच शीर्ष और निचले मार्जिन को संभालना बहुत मुश्किल है। मैं एक बेहतर समाधान बस के display: table;बजाय का उपयोग कर पाया display: inline-block;।

— ड्यूरामे