मैं अपनी सामग्री से एक div को बड़ा कैसे नहीं बना सकता हूं?

2070

मेरे पास एक लेआउट है:

<div>
    <table>
    </table>
</div>

मैं चाहूंगा divकि मेरे tableबनने तक केवल उतना ही विस्तार हो।

html css width

— पीटर मोर्टेंसन
स्रोत

90

प्रभाव को "संकोचन" कहा जाता है, और जैसा कि उत्तर दिया गया है कि ऐसा करने के कुछ तरीके हैं (फ्लोट, इनलाइन, मिनट / अधिकतम-चौड़ाई) जिनमें से सभी का साइड-इफेक्ट चुनने के लिए है

— annakata

2426

समाधान आपके divलिए सेट करना है display: inline-block।

— user473598
स्रोत

239

@ leif81 आप एक spanया एक divया ulकुछ और का उपयोग कर सकते हैं , महत्वपूर्ण हिस्सा उस कंटेनर के लिए है जिसे आप न्यूनतम चौड़ाई में रखना चाहते हैं, उसके पास CSS संपत्ति हैdisplay: inline-block

— miahelf

10

यदि कोई आश्चर्यचकित करता है: कोई तब माता-पिता को "टेक्स्ट-संरेखित: केंद्र" पर अभिभावक और "पाठ-संरेखित: बाईं ओर" सेट करके केंद्र में रख सकता है (उदाहरण के लिए <body style = "text-align: center"> < स्पैन शैली = "टेक्स्ट-संरेखित करें: लेफ्ट; डिस्प्ले: इनलाइन-ब्लॉक;"> <टेबल> ... </ टेबल> </ span> </ body>)

— बर्नस्टीन

12

यह स्पैन के साथ मेरे लिए क्रोम पर काम नहीं करता है, लेकिन सफेद-अंतरिक्ष का उपयोग करके काम करता है: नॉरैप;

— अल्बानक्स

57

कृपया ध्यान दें कि एक बार आपके पास display: inline-blockसंपत्ति सेट margin: 0 auto;होने के बाद उम्मीद के मुताबिक काम नहीं होगा। उस स्थिति में यदि मूल कंटेनर है text-align: center;तो inline-blockतत्व क्षैतिज रूप से केंद्रित होगा।

— सावास वेदोवा

12

inline-blockमेरे लिए काम नहीं किया, लेकिन inline-flexडीआईडी।

— घोराछत

331

आप एक ब्लॉक एलीमेंट चाहते हैं जिसमें सीएसएस को सिकोड़-से-फिट चौड़ाई कहा जाता है और कल्पना ऐसी चीज प्राप्त करने के लिए एक धन्य तरीका प्रदान नहीं करती है। CSS2 में, हटना-फिट होना एक लक्ष्य नहीं है, लेकिन इसका मतलब है कि ऐसी स्थिति से निपटने के लिए जहां ब्राउज़र को "पतली हवा से चौड़ाई प्राप्त करना" है। वे परिस्थितियाँ हैं:

नाव
पूरी तरह से तैनात तत्व
इनलाइन-ब्लॉक तत्व
तालिका तत्व

जब कोई चौड़ाई निर्दिष्ट नहीं है। मैंने सुना है कि आप CSS3 में जो चाहते हैं उसे जोड़ने के बारे में सोचते हैं। अभी के लिए, उपरोक्त में से एक के साथ करें।

सुविधा को सीधे उजागर नहीं करने का निर्णय अजीब लग सकता है, लेकिन एक अच्छा कारण है। ये महंगा है। सिंक-टू-फिट का मतलब है कम से कम दो बार स्वरूपण: आप किसी तत्व को तब तक प्रारूपित करना शुरू नहीं कर सकते जब तक कि आपको उसकी चौड़ाई का पता न चल जाए, और आप संपूर्ण सामग्री से गुजरने वाली चौड़ाई w / o की गणना नहीं कर सकते। इसके अलावा, एक को फिट-टू-फिट तत्व की आवश्यकता नहीं होती है जितनी बार एक सोच सकता है। आपको अपनी तालिका के चारों ओर अतिरिक्त div की आवश्यकता क्यों है? हो सकता है कि टेबल कैप्शन आप सभी की जरूरत है।

— बूटी-oxa
स्रोत

34

मैं कहूंगा कि इसके inline-blockलिए बिल्कुल इरादा है और समस्या को पूरी तरह हल करता है।

— मियाहेलफ

6

मुझे लगता है कि वे css4 में जोड़ रहे हैं और यह होगाcontent-box, max-content, min-content, available, fit-content, auto

— मुहम्मद उमर

4

नया fit-contentकीवर्ड (अस्तित्व में नहीं है जब यह उत्तर पहली बार लिखा गया था, और अभी भी पूरी तरह से समर्थित नहीं है ) आपको स्पष्ट रूप से "सिकोड़ने योग्य" एक तत्व के लिए नौकरशाही का आकार घटाने के लिए अनुमति देता है, यदि आप यहाँ सुझाए गए किसी भी हैक की आवश्यकता को दूर करते हैं। केवल समर्थन के साथ ब्राउज़र को लक्षित करने के लिए पर्याप्त भाग्यशाली है। फिर भी; ये अभी के लिए उपयोगी रहें!

— मार्क अमेरी

floatमैं क्या करने की जरूरत है!

— निपुणसुधा

228

मुझे लगता है का उपयोग कर

display: inline-block;

काम करेगा, हालांकि मैं ब्राउज़र संगतता के बारे में निश्चित नहीं हूं।

एक और उपाय यह होगा कि आप अपने divको दूसरे में लपेटें div(यदि आप ब्लॉक व्यवहार बनाए रखना चाहते हैं):

HTML:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

सीएसएस:

.yourdiv
{
    display: inline;
}

— mbillard
स्रोत

23

ब्राउज़र संगतता प्रश्न का उत्तर देने के लिए: यह DIV तत्वों पर IE7 / 8 के साथ काम नहीं करेगा। आपको SPAN तत्वों का उपयोग करना होगा।

— मैट ब्रॉक

@feeela - मैंने हमेशा ज़ूम जैसे उदाहरण के सामने एक * लगाया *display: inline; *zoom: 1;। मैंने इस विशेष स्थिति के लिए परीक्षण नहीं किया है, लेकिन मैंने हमेशा अतीत में पाया है कि hasLayout हैक केवल IE7 या IE8 के लिए IE7-mode (या qu8 में IE8!) के लिए आवश्यक है।

— रोबोकट

@robocat हाँ, यह वास्तव में एक वैकल्पिक हल किया है inline-block7. IE में सक्षम

— feeela

@feela - आपकी टिप्पणी से मुझे कोई मतलब नहीं है! मैं सुझाव दे रहा था कि आप ज़ूम के सामने * Ie * ज़ूम करें: 1;

— डकैत

4

कृपया बताएं कि आपके इनलाइन-ब्लॉक कार्यों का समाधान क्यों है।

— HelloWorldNoMore

219

display: inline-block आपके तत्व में एक अतिरिक्त मार्जिन जोड़ता है।

मैं इसकी सिफारिश करूंगा:

#element {
    display: table; /* IE8+ and all other modern browsers */
}

बोनस: अब आप आसानी से उस फैंसी नए केंद्र को आसानी #elementसे जोड़ सकते हैं margin: 0 auto।

— सलमान वॉन अब्बास
स्रोत

14

+1 - यह आधुनिक ब्राउज़रों के लिए सबसे अच्छा और सबसे साफ, समाधान है जो तत्व को केंद्रित करने की भी अनुमति देता है। position: absolute<IE8 के लिए एक सशर्त टिप्पणी आवश्यक है।

— unnb us

21

निर्दिष्ट करने से display: inline-blockकोई मार्जिन नहीं जोड़ा जाता है। लेकिन सीएसएस इनलाइन तत्वों के बीच दिखाए जाने वाले व्हाट्सएप को संभालता है।

— 15-16 को प्रोलेला

कृपया बताएं कि आपके प्रदर्शन का समाधान: तालिका क्यों काम करती है।

— HelloWorldNoMore

2

इनलाइन-ब्लॉक तत्व को उसके माता-पिता में स्थिति के लिए असंभव बनाता है (जैसे कि यदि कोई पाठ-संरेखण है: केंद्र आपको इसे बाईं ओर

— चिपकाने के

1

अगर आपके पास जाने का यह तरीका हैposition: absolute

— m4heshd

90

आप कोशिश कर सकते हैं fit-content(CSS3):

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}

— विटाली फेडोरेंको
स्रोत

1

@BartlomiejSkwira IE या ग्रहण में काम करने वाला कोई विकल्प? के रूप में इनलाइन-ब्लॉक मेरे लिए काम नहीं कर अन्य समाधान .. \

— DAVIDBALAS1

8

यह बहुत अधिक समझ में आता है, बेशक इसमें समर्थन का अभाव है।

— सावा बी

86

मेरे लिए क्या काम करता है:

display: table;

में div। ( फ़ायरफ़ॉक्स और गूगल क्रोम पर परीक्षण किया गया )।

— सोनी सैंटोस
स्रोत

4

हाँ, खासकर यदि आपको मार्जिन के साथ केंद्र की आवश्यकता है: ऑटो। वह मामला इनलाइन-ब्लॉक समाधान नहीं है।

— Zsolt Szatmari

1

यह भी ध्यान दें, यदि आप इस तत्व के अंदर पैडिंग का काम चाहते हैं, तो आपको border-collapse: separate;स्टाइल सेट करना होगा । यह कई ब्राउज़रों में डिफ़ॉल्ट है, लेकिन अक्सर css चौखटे जैसे बूटस्ट्रैप इसे फिर से निर्धारित करते हैं collapse।

— रुस्लान Stelmachenko

2009 में किए गए विंडोज मोबाइल 6.5 फोन पर MSIE 6 पर परीक्षण किया गया: यह इनायत से एक पूर्ण-चौड़ाई वाले डिव (जो एक फोन पर एक मुद्दा होने की संभावना नहीं है) का अपमान करता है। यदि कोई डेस्कटॉप पर 8 से कम इंटरनेट एक्सप्लोरर के संस्करण का उपयोग कर रहा है, तो वे एक असमर्थित ऑपरेटिंग सिस्टम का उपयोग कर रहे हैं (IE6 XP के साथ आया था, IE7 विस्टा के साथ आया था); यदि वे उस मशीन पर इंटरनेट का सुरक्षित उपयोग जारी रखना चाहते हैं, तो मैं उन्हें GNU / Linux में अपग्रेड करने के लिए कहकर एक पृष्ठ पर पुनः निर्देशित करूँगा।

— सिलस एस। ब्राउन

85

दो बेहतर उपाय हैं

display: inline-block;

या
display: table;

इन दोनों में display:table;से बेहतर है, क्योंकि display: inline-block;एक अतिरिक्त मार्जिन जोड़ता है।

के लिए display:inline-block;आप नकारात्मक मार्जिन विधि का उपयोग कर सकते हैं अतिरिक्त स्थान तय करने के लिए

— शुवो हबीब
स्रोत

2

क्या आप समझाते हैं कि display:tableबेहतर क्यों है?

— नाथनियल फोर्ड

1

प्रदर्शन के लिए: इनलाइन-ब्लॉक, आपको अतिरिक्त रिक्ति को ठीक करने के लिए नकारात्मक मार्जिन विधि का उपयोग करना होगा।

— शुवो हबीब

8

@NathanielFord, display:tableब्लॉक स्वरूपण संदर्भ में तत्व को छोड़ देता है, इसलिए आप हमेशा की तरह मार्जिन आदि के साथ इसकी स्थिति को नियंत्रित कर सकते हैं। display:-inline-*दूसरी ओर, तत्व को इनलाइन फॉर्मेटिंग संदर्भ में डालता है, जिसके कारण ब्राउज़र इसके चारों ओर अनाम ब्लॉक आवरण बना देता है, जिसमें वंशानुगत फ़ॉन्ट / लाइन-ऊंचाई सेटिंग्स के साथ लाइन बॉक्स होता है, और ब्लॉक को उस लाइन बॉक्स में सम्मिलित करें (संरेखित करें) यह मूल रूप से आधारभूत रूप से लंबवत है)। इसमें अधिक "जादू" और इसलिए संभावित आश्चर्य शामिल है।

— इल्या स्ट्रेलित्सिन

84

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

फू हैक - इनलाइन-ब्लॉक स्टाइलिंग के लिए क्रॉस ब्राउज़र समर्थन (2007-11-19) ।

— nikib3ro
स्रोत

3

किसी को भी इस मुद्दे को इन सभी शैलियों को जोड़ना चाहिए। फ़ायरफ़ॉक्स ने मार्जिन का उपयोग किया जब उपयोग नहीं किया-moz-inline-stack

— जस्टिन

43

किस संदर्भ यह दिखाई देगा में जानते हुए भी नहीं है, लेकिन मेरा मानना है कि सीएसएस शैली की संपत्ति floatया तो leftया rightइस प्रभाव पड़ेगा। दूसरी ओर, इसके अन्य दुष्प्रभाव भी होंगे, जैसे कि पाठ को इसके आसपास तैरने की अनुमति देना।

कृपया मुझे सही करें अगर मैं गलत हूं, तो मैं 100% निश्चित नहीं हूं, और वर्तमान में मैं खुद इसका परीक्षण नहीं कर सकता।

— falstro
स्रोत

1

हाँ, सीएसएस 2.1 में। (CSS2.0 फ्लोट को पूर्ण-चौड़ाई बना देगा, लेकिन केवल IE5 / Mac वास्तव में ऐसा करता है)। टेबल्स और फ़्लोट्स केवल प्रदर्शन प्रकार हैं जो उनकी सामग्री को कम-फिट कर सकते हैं।

— बोबोंस

41

आपके प्रश्न का उत्तर भविष्य में मेरे मित्र देता है ...

अर्थात् "आंतरिक" नवीनतम CSS3 अद्यतन के साथ आ रहा है

width: intrinsic;

दुर्भाग्य से IE इसके साथ पीछे है इसलिए यह अभी तक इसका समर्थन नहीं करता है

इसके बारे में और अधिक: सीएसएस आंतरिक और बाहरी नौकरशाही का आकार घटाने मॉड्यूल 3 और मैं उपयोग कर सकते हैं? : आंतरिक और बाहरी नौकरशाही का आकार घटाने ।

अभी के लिए आपको संतुष्ट होना होगा <span>या <div>सेट करना होगा

display: inline-block;

— ट्रोजन
स्रोत

12

intrinsicमान के रूप में गैर-मानक है। यह वास्तव में है width: max-content। उस या पहले से जुड़े मसौदे पर एमडीएन पृष्ठ देखें ।

— मैरीसिडेड

34

CSS2 के संगत समाधान का उपयोग करना है:

.my-div
{
    min-width: 100px;
}

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

.my-div
{
    float: left;
}

— Soviut
स्रोत

3

यह होना चाहिए। आप किस सिद्धांत का उपयोग कर रहे हैं?

— सोवियुत

34

width:1px;
white-space: nowrap;

मेरे लिए ठीक काम करता है :)

— डफ वूली
स्रोत

लेकिन तब फिर से मेरा मामला एक डिव के अंदर का पाठ था, न कि ओपी की तरह एक टेबल।

— रुई मार्केज

jquery के यूई स्लाइडर के लिए यह बहुत अच्छा है क्योंकि यू को सामग्री की चौड़ाई निर्धारित करने की आवश्यकता नहीं है

— कॉफ़ी जेन्की

26

ठीक है, कई मामलों में आपको डिफॉल्ट डिव के रूप में heightऔर widthऑटो के रूप में कुछ भी करने की आवश्यकता नहीं है , लेकिन अगर यह आपका मामला नहीं है, तो आपके inline-blockलिए काम करने वाला प्रदर्शन लागू करना ... मैं आपके लिए बनाए गए कोड को देखता हूं और यह करता हूं आप क्या खोज रहे हैं:

div {
  display: inline-block;
}

<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>

स्निपेट का विस्तार करें

— एलिरेज़ा
स्रोत

22

इसका उल्लेख टिप्पणियों में किया गया है और इनमें से किसी एक उत्तर को खोजना मुश्किल है:

यदि आप किसी display: flexभी कारण से उपयोग कर रहे हैं , तो आप इसके बजाय उपयोग कर सकते हैं:

div {
    display: inline-flex;
}

यह भी ब्राउज़रों में व्यापक रूप से समर्थित है।

— youngrrrr
स्रोत

यह वही है जो मुझे पहले से उपयोग करने की आवश्यकता हैdisplay: flex;

— डेनी

19

आप इसे केवल display: inline;(या white-space: nowrap;) का उपयोग करके कर सकते हैं ।

मुझे उम्मीद है कि आपको यह काम का लगेगा।

— miksiii
स्रोत

18

आप inline-block@ user473598 के रूप में उपयोग कर सकते हैं , लेकिन पुराने ब्राउज़रों से सावधान रहें।

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

मोज़िला इनलाइन-ब्लॉक का बिल्कुल समर्थन नहीं करता है, लेकिन उनके पास -moz-inline-stackजो है वह उसी के बारे में है

inline-blockप्रदर्शन विशेषता के आसपास कुछ क्रॉस-ब्राउज़र : https://css-tricks.com/snippets/css/cross-browser-inline-block/

आप इस विशेषता के साथ कुछ परीक्षण देख सकते हैं: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

— RPichioli
स्रोत

1

तुम्हारी किस बारे में बोलने की इच्छा थी? मोज़िला फ़ायरफ़ॉक्स inline-block3.0 (2008) से समर्थन करता है । स्रोत: developer.mozilla.org/en-US/docs/Web/CSS/…

— Chazy Chaz

18

बस अपनी CSS फ़ाइल में एक शैली डालें

div { 
    width: fit-content; 
}

— हमजा
स्रोत

1

मुझे नहीं लगता कि यह एक क्रॉस-ब्राउज़र समर्थित विकल्प है।

— डेविड रेक्टर

2

वर्तमान में एज में काम नहीं करता है: caniuse.com/#search=fit-content

— molsson

आप -moz-fit-contentएफएफ के लिए उपयोग कर सकते हैं , संभवतः अन्य विक्रेता उपसर्ग अपने स्वयं की अनुमति देंगे ...

— बेंज

1

यह विटाली

— फेडोरेंको

18

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <div id="content_lalala">
                this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
            </div>
        </td>
    </tr>
</table>

मुझे पता है कि लोग कभी-कभी तालिकाओं को पसंद नहीं करते हैं, लेकिन मैं आपको बताना चाहता हूं, मैंने सीएसएस इनलाइन हैक की कोशिश की, और वे थोड़े से div में काम करते हैं, लेकिन दूसरों में ऐसा नहीं है, इसलिए वास्तव में विस्तार करने वाले div को घेरना आसान था एक तालिका ... और ... इसमें इनलाइन संपत्ति हो सकती है या नहीं और फिर भी तालिका वह है जो सामग्री की कुल चौड़ाई रखने वाली है। =)

— एडवर्ड
स्रोत

2

यह "उचित" तरीका नहीं है, लेकिन IE6 / 7/8 अक्सर अच्छा नहीं खेलता है जब चीजें थोड़ी जटिल हो जाती हैं, तो मैं पूरी तरह से समझता हूं कि आप इसे इस तरह क्यों करेंगे। आपको मेरा वोट मिला।

— क्रेगो

मैं ऐसा करूंगा, लेकिन मुझे हर एक इनपुट बॉक्स को घेरना होगा, ताकि अतिरिक्त html हो।

— निकोफ्ट

15

एक कार्यशील डेमो यहां है-

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

    width: fit-content; 
    height: fit-content;

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>

स्निपेट का विस्तार करें

— अबरार जहीन
स्रोत

13

मेरा CSS3 फ्लेक्सबॉक्स दो फ्लेवर में समाधान: शीर्ष पर एक स्पान की तरह व्यवहार करता है और सबसे नीचे एक डिव की तरह व्यवहार करता है, एक आवरण की मदद से सभी चौड़ाई लेता है। उनकी कक्षाएं क्रमशः "टॉप", "बॉटम" और "बॉटमवॉपर" हैं।

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}

Is this
<div class="top">
	<table>
        <tr>
            <th>OS</th>
            <th>Version</th> 
        </tr>
        <tr>
            <td>OpenBSD</td>
            <td>5.7</td> 
        </tr>
        <tr>
            <td>Windows</td>
            <td>Please upgrade to 10!</td> 
        </tr>
    </table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
    <div class="bottom">
    	<table>
            <tr>
                <th>OS</th>
                <th>Version</th> 
            </tr>
            <tr>
                <td>OpenBSD</td>
                <td>5.7</td> 
            </tr>
            <tr>
                <td>Windows</td>
                <td>Please upgrade to 10!</td> 
            </tr>
        </table>
    </div>
</div>
this is what you are looking for.

स्निपेट का विस्तार करें

— लॉयड डोमिनिक
स्रोत

के लिए यश display: inline-flex;। क्रोम 62, फ़ायरफ़ॉक्स 57, और सफारी 11 के लिए उपसर्ग के बिना BTW यह काम करता है

— होरासियो

12

<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

यह पैरेंट डिव चौड़ाई को सबसे बड़े तत्व की चौड़ाई के समान बना देगा।

— जैमिन दवे
स्रोत

वहाँ एक रास्ता है कि मैं इसे केवल ऊर्ध्वाधर आकार के लिए लागू करने के लिए कम से कम और क्षैतिज बड़े रख सकते हैं?

— गोबलींस

12

कोशिश करो display: inline-block;। इसके लिए क्रॉस ब्राउज़र संगत होना चाहिए नीचे दिए गए सीएसएस कोड का उपयोग करें।

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}

<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>

स्निपेट का विस्तार करें

— जेम्स
स्रोत

11

फायरबग के साथ छेड़छाड़ से मुझे संपत्ति का मूल्य मिला -moz-fit-contentजो वास्तव में ओपी चाहता था और जिसका पालन किया जा सकता था:

width: -moz-fit-content;

हालाँकि यह केवल फ़ायरफ़ॉक्स पर काम करता है, मैं क्रोम जैसे अन्य ब्राउज़रों के लिए कोई समकक्ष नहीं पा सका।

— जिसका नाम मोमेनी है
स्रोत

जनवरी 2017 तक, IE (सभी संस्करण, एज और मोबाइल शामिल) और ओपेरा मिनी के लिए कोई समर्थन नहीं है fit-content। फ़ायरफ़ॉक्स केवल चौड़ाई का समर्थन करता है। अन्य ब्राउज़र इसे अच्छी तरह से समर्थन करते हैं।

— गैविन

11

आप इस कोड को आज़मा सकते हैं। CSS सेक्शन में कोड का पालन करें।

div {
  display: inline-block;
  padding: 2vw;
  background-color: green;
}

table {
  width: 70vw;
  background-color: white;
}

<div>
    <table border="colapsed">
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>

    </table>
</div>

स्निपेट का विस्तार करें

— शोरीन बरुआ
स्रोत

7

मैंने एक समान समस्या हल की है (जहां मैं उपयोग नहीं करना चाहता था display: inline-blockक्योंकि आइटम को केंद्रित किया गया था) spanटैग के अंदर एक टैग जोड़कर div, और सीएसएस स्वरूपण को बाहरी divटैग से नए आंतरिक spanटैग में ले जा रहा है। बस इसे एक और वैकल्पिक विचार के रूप में बाहर फेंकना यदि display: inline blockआपके लिए उपयुक्त उत्तर नहीं है।

— जेसिका ब्राउन
स्रोत

7

हम divतत्व पर दो तरीकों में से किसी का उपयोग कर सकते हैं :

display: table;

या,

display: inline-block;

मैं उपयोग करना पसंद करता हूं display: table;, क्योंकि यह अपने आप ही सभी अतिरिक्त स्थानों को संभालता है। जबकि display: inline-blockकुछ अतिरिक्त स्पेस फिक्सिंग की जरूरत है।

— नौसिखिए
स्रोत

6

div{
  width:auto;
  height:auto;
}

— AJchandu
स्रोत

यह काम नहीं करेगा यदि div में इनलाइन (या इनलाइन-ब्लॉक) तत्व होते हैं और उनके पास div की तुलना में अलग-अलग फ़ॉन्ट-आकार और रेखा-ऊंचाई होती है।

— कोट्सब्रो

5

यदि आपके पास कंटेनर तोड़ने वाली लाइनें हैं, तो घंटों के बाद एक अच्छे सीएसएस समाधान की तलाश में है और कोई भी नहीं ढूंढ रहा है , मैं अब इसके बजाय jQuery का उपयोग करता हूं :

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});

nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>

स्निपेट का विस्तार करें

— cregox
स्रोत

यह क्रोम में मेरे लिए स्निपेट में स्पष्ट रूप से टूट गया है; दूसरी बार फिक्स बटन पर क्लिक करने पर यह पहली बार क्लिक करने के लिए अलग परिणाम तैयार करता है।

— मार्क एमी

मेरे मैक पर @MarkAmery मैं सिर्फ क्रोम, सफारी और फ़ायरफ़ॉक्स पर यह कोशिश की और यह सब ठीक है: कोई दृश्यमान त्रुटियां, कंसोल पर कुछ भी नहीं, लगातार व्यवहार। शायद यह खिड़कियों के साथ कुछ है ...

— cregox

5

संशोधित (यदि आपके कई बच्चे हैं तो काम करता है): आप jQuery का उपयोग कर सकते हैं (JSFiddle लिंक देखें)

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

JQuery को शामिल करना न भूलें ...

यहाँ JSfiddle देखें

— Bondsmith
स्रोत

यह टूट गया है यदि आपके डिव में कई बच्चे हैं; यह पहले बच्चे की दिव्य चौड़ाई निर्धारित करता है ।

— मार्क अमेरी

@MarkAmery सबसे पहले, इससे पहले कि आप इसे नकारात्मक वोट दें, कृपया प्रश्न को ध्यान से पढ़ें, उन्होंने एक बच्चे के लिए कहा। यदि आप वास्तव में उत्सुक हैं कि यह कई बच्चों के साथ कैसे किया जा सकता है तो संशोधित उत्तर देखें।

— बोन्डस्मिथ

4

मैंने कोशिश की div.classname{display:table-cell;}और यह काम कर गया!

— UnLoCo
स्रोत