එහි අන්තර්ගතයට වඩා විශාල නොවන කොට් div ාශයක් සාදා ගන්නේ කෙසේද?

මට සමාන පිරිසැලසුමක් ඇත:

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

මගේ divකැමැත්ත තරම් පුළුල් වීමට පමණක් මම කැමතියි table.

විසඳුම ඔබේ divසැකසුමයි display: inline-block.

ඔබට අවශ්‍ය වන්නේ බ්ලොක් මූලද්‍රව්‍යයක් වන අතර එය CSS ලෙස හඳුන්වන පළල හැකිලීමට සරිලන පළලක් වන අතර පිරිවිතර එවැනි දෙයක් ලබා ගැනීමට ආශීර්වාද ලත් ක්‍රමයක් සපයන්නේ නැත. CSS2 හි, හැකිලීම-ගැලපීම ඉලක්කයක් නොවේ, නමුත් එයින් අදහස් කරන්නේ බ්‍රව්සරයට සිහින් වාතයෙන් පළලක් ලබා ගත යුතු තත්වයක් සමඟ කටයුතු කිරීමයි. එම තත්වයන් නම්:

• පාවෙන්න
• නියත වශයෙන්ම ස්ථානගත කළ මූලද්‍රව්‍යය
• inline-block මූලද්‍රව්‍යය
• වගු අංගය

පළල නිශ්චිතව දක්වා නොමැති විට. CSS3 හි ඔබට අවශ්‍ය දේ එකතු කිරීමට ඔවුන් සිතන බව මට අසන්නට ලැබුණි. දැනට, ඉහත එකක් සමඟ කරන්න.

විශේෂාංගය කෙලින්ම නිරාවරණය නොකිරීමට ගත් තීරණය අමුතු බවක් පෙනෙන්නට තිබුණත් හොඳ හේතුවක් තිබේ. එය මිල අධිකයි. හැකිලීම-ගැලපීම යන්නෙන් අදහස් කරන්නේ අවම වශයෙන් දෙවරක්වත් ආකෘතිකරණය කිරීමයි: මූලද්‍රව්‍යයක පළල දැන ගන්නා තෙක් ඔබට එය ආකෘතිකරණය කිරීම ආරම්භ කළ නොහැකි අතර සම්පූර්ණ අන්තර්ගතය හරහා යන පළල ගණනය කළ නොහැක. තවද, කෙනෙකුට සිතිය හැකි සෑම විටම හැකිලීමට-ගැලපෙන අංගයක් අවශ්‍ය නොවේ. ඔබේ මේසය වටා අමතර බෙදීමක් අවශ්‍ය වන්නේ ඇයි? සමහර විට මේස ශීර්ෂ පා you ය ඔබට අවශ්‍ය වනු ඇත.

මම හිතන්නේ පාවිච්චි කරනවා

display: inline-block;

කෙසේ වෙතත්, බ්‍රව්සර් අනුකූලතාව ගැන මට විශ්වාස නැත.

තවත් විසඳුමක් වනුයේ ඔබේ divතවත් තැනකට ඔතා divගැනීමයි (ඔබට වාරණ හැසිරීම පවත්වා ගැනීමට අවශ්‍ය නම්):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

display: inline-block ඔබේ මූලද්‍රව්‍යයට අමතර ආන්තිකයක් එක් කරයි.

මම මෙය නිර්දේශ කරමි:

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

බෝනස්: ඔබ ද දැන් ඉතා පහසුවෙන් බව විසිතුරු නව මධ්යස්ථානය හැකි #elementපමණක් එකතු කිරීම මඟින් margin: 0 auto.

ඔබට උත්සාහ කළ හැකිය fit-content(CSS3):

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

• බ්‍රව්සර් සහාය
• පිරිවිතර

මට වැඩ කරන්නේ:

display: table;

දී div. ( ෆයර්ෆොක්ස් සහ ගූගල් ක්‍රෝම් හි පරීක්ෂා කර ඇත ).

වඩා හොඳ විසඳුම් දෙකක් තිබේ

1. display: inline-block;

   හෝ

2. display: table;

මේ දෙකෙන් display:table;වඩා හොඳය, මන්ද display: inline-block;අමතර ආන්තිකයක් එකතු වන බැවිනි .

display:inline-block;අමතර ඉඩ නිවැරදි කිරීම සඳහා ඔබට negative ණ ආන්තික ක්‍රමය භාවිතා කළ හැකි බැවිනි

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

ෆූ හැක් - ඉන්ලයින්-බ්ලොක් ස්ටයිලිං සඳහා හරස් බ්‍රව්සර් සහාය (2007-11-19) .

දේ සන්දර්භය තුළ නොදැන මෙම දිස් වනු ඇත, නමුත් මම CSS ආකාරයේ දේපල විශ්වාස floatඑක්කෝ leftහෝ rightමෙම බලපෑමක් ඇති කරනු ඇත. අනෙක් අතට, එය පෙළ වටා පාවීමට ඉඩ දීම වැනි වෙනත් අතුරු ආබාධ ද ඇති කරයි.

මම වැරදියි නම් කරුණාකර මාව නිවැරදි කරන්න, මට 100% ක් විශ්වාස නැත, දැනට එය මා විසින්ම පරීක්ෂා කළ නොහැක.

ඔබේ ප්‍රශ්නයට පිළිතුර අනාගතයේ මගේ මිතුරා ...

එනම් "අභ්‍යන්තර" නවතම CSS3 යාවත්කාලීනය සමඟ පැමිණේ

width: intrinsic;

අවාසනාවට IE එය පසුපසින් සිටින බැවින් එය තවමත් එයට සහාය නොදක්වයි

ඒ ගැන වැඩි විස්තර: CSS අභ්‍යන්තර සහ බාහිර ප්‍රමාණයේ මොඩියුල මට්ටම 3 සහ මට භාවිතා කළ හැකිද? : අභ්‍යන්තර සහ බාහිර ප්‍රමාණකරණය .

දැන් ඔබට සෑහීමට පත් විය යුතු <span>හෝ <div>සකසා

display: inline-block;

width:1px;
white-space: nowrap;

මට හොඳින් වැඩ කරයි :)

CSS2 අනුකූල විසඳුමක් භාවිතා කිරීම:

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

ඔබට හැකි තරම් කුඩා ප්‍රමාණයක් බලහත්කාරයෙන් පාවීමටද පුළුවන, නමුත් ඔබේ කොට් within ාශය තුළ යමක් පාවෙමින් තිබේ නම් ඔබට පැහැදිලි විසඳුමක් භාවිතා කිරීමට අවශ්‍ය වනු ඇත :

.my-div
{
    float: left;
}

හරි, බොහෝ අවස්ථාවන්හීදී ඔබට පෙරනිමියෙන් 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>

මෙය අදහස් දැක්වීම්වල සඳහන් කර ඇති අතර එක් පිළිතුරකින් සොයා ගැනීම දුෂ්කර ය:

ඔබ display: flexකුමන හේතුවක් නිසා හෝ භාවිතා කරන්නේ නම් , ඔබට ඒ වෙනුවට භාවිතා කළ හැකිය:

div {
    display: inline-flex;
}

මෙය බ්‍රව්සර් හරහා ද පුළුල් ලෙස සහාය වේ.

display: inline;(හෝ white-space: nowrap;) භාවිතා කිරීමෙන් ඔබට එය කළ හැකිය .

මෙය ඔබට ප්‍රයෝජනවත් වේ යැයි මම බලාපොරොත්තු වෙමි.

ඔබට 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/

ඔබේ CSS ගොනුවට ශෛලියක් යොදන්න

div { 
    width: fit-content; 
}

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

සමහර විට මිනිසුන් වගු වලට කැමති නැති බව මම දනිමි, නමුත් මම ඔබට පැවසිය යුතුය, මම සීඑස්එස් ඉන්ලයින් හැක්ස් අත්හදා බැලුවෙමි, ඔවුන් යම් යම් අංශවල වැඩ කළ නමුත් අනෙක් අය එසේ නොකළේය, එබැවින් පුළුල් වන ඩිවි එක ඇතුලත් කිරීම පහසුය වගුවක් ... සහ ... එයට පේළිගත දේපල තිබිය හැකි හෝ නොතිබිය හැකි අතර තවමත් වගුවේ අන්තර්ගතයේ මුළු පළල රඳවා තබා ගනී. =)

වැඩ කරන නිරූපණයක් මෙහි ඇත-

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

මගේ 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.

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

මෙය මවුපියන්ගේ පළල විශාලතම මූලද්‍රව්‍ය පළලට සමාන කරයි.

උත්සාහ කරන්න display: inline-block;. එය හරස් බ්‍රව්සරයට අනුකූල වීමට කරුණාකර පහත css කේතය භාවිතා කරන්න.

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>

ෆයර්බග් සමඟ අවුල්සහගත ලෙස මම දේපල වටිනාකම සොයාගත්තා, -moz-fit-contentඑය OP ට අවශ්‍ය දේ හරියටම කරන අතර එය පහත පරිදි භාවිතා කළ හැකිය:

width: -moz-fit-content;

එය ක්‍රියාත්මක වන්නේ ෆයර්ෆොක්ස් වල පමණක් වුවද, ක්‍රෝම් වැනි වෙනත් බ්‍රව්සර් සඳහා සමාන කිසිවක් මට සොයාගත නොහැකි විය.

ඔබට මෙම කේතය උත්සාහ කළ හැකිය. 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>

ටැගය තුළ ටැගයක් display: inline-blockඑක් කිරීමෙන් සහ CSS හැඩතල ගැන්වීම පිටත ටැගයේ සිට නව අභ්‍යන්තර ටැගයට ගෙන යාමෙන් මම සමාන ගැටළුවක් ( අයිතමය කේන්ද්‍රගත වූ නිසා භාවිතා කිරීමට අවශ්‍ය නොවූ තැන) විසඳා ඇත . ඔබට සුදුසු පිළිතුරක් නොවේ නම් මෙය වෙනත් විකල්ප අදහසක් ලෙස එතැනට විසි කිරීම.spandivdivspandisplay: inline block

divමූලද්රව්යයේ ඕනෑම ක්රමයක් අපට භාවිතා කළ හැකිය :

display: table;

හෝ,

display: inline-block; 

මම භාවිතා කිරීමට කැමැත්තෙමි display: table;, මන්ද එය හසුරුවන නිසා, සියලු අමතර අවකාශයන් තනිවම. අතර display: inline-blockවැඩිපුර ඉඩ හදන්න වෙනවා.

div{
  width:auto;
  height:auto;
}

ඔබ සතුව බහාලුම් කඩන රේඛා තිබේ නම්, පැය ගණනාවකට පසු හොඳ CSS විසඳුමක් සොයමින් කිසිවක් සොයාගත නොහැකි නම්, මම දැන් ඒ වෙනුවට 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>

සංශෝධිත (ඔබට දරුවන් කිහිප දෙනෙකු සිටී නම් ක්‍රියා කරයි): ඔබට jQuery භාවිතා කළ හැකිය (JSFiddle සබැඳිය බලන්න)

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


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

JQuery ඇතුළත් කිරීමට අමතක නොකරන්න ...

JSfiddle බලන්න

මම උත්සාහ කළ div.classname{display:table-cell;}අතර එය සාර්ථක විය!