html - Div को अपनी सामग्री से बड़ा क्यों नहीं बनाया जाए?




css width (20)

Personnaly, मैं बस यह करता हूँ:

HTML कोड:

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

सीएसएस कोड:

div {
    display: inline;
}

यदि आप अपने div पर एक फ्लोट लागू करते हैं, तो यह भी काम करता है लेकिन जाहिर है, आपको अगले HTML तत्व पर "दोनों साफ़ करें" सीएसएस नियमों को लागू करने की आवश्यकता है।

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

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

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



आप 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/


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

  • नाव
  • बिल्कुल तैनात तत्व
  • इनलाइन-ब्लॉक तत्व
  • टेबल तत्व

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

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


एक कामकाजी डेमो यहां है-

.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>


एक सीएसएस 2 संगत समाधान का उपयोग करना है:

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

आप अपने div को भी तैर सकते हैं जो इसे जितना संभव हो सके उतना छोटा कर देगा, लेकिन अगर आपके div के अंदर कुछ भी तैर रहा है तो आपको एक clearfix का उपयोग करने की आवश्यकता होगी:

.my-div
{
    float: left;
}

दो बेहतर समाधान हैं

  1. display: inline-block;

    या

  2. display: table;

इन दो display:table; बेहतर है।

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


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

width: -moz-fit-content;

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


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

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: table;

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


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


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


यह नहीं पता कि यह किस संदर्भ में दिखाई देगा, लेकिन मुझे विश्वास है कि सीएसएस-स्टाइल प्रॉपर्टी float या तो left या right इस प्रभाव का होगा। दूसरी तरफ, इसके साथ-साथ अन्य दुष्प्रभाव भी होंगे, जैसे पाठ को इसके चारों ओर तैरने की अनुमति देना।

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


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

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


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

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

यहां जेएसफ़िल्ड देखें


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

display: table;

या,

display: inline-block; 

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


display: inline-block; प्रयास करें 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>


ठीक है, कई मामलों में आपको कुछ भी करने की ज़रूरत नहीं है क्योंकि डिफॉल्ट div की 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>



<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>

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


div{
  width:auto;
  height:auto;
}




width