Hoe kan ik een div maken die niet groter is dan de inhoud?

Ik heb een indeling die lijkt op:

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

Ik wil dat de divalleen zo breed wordt als mijn tablewordt.

Antwoord 1, autoriteit 100%

De oplossing is om je divin te stellen op display: inline-block.

Antwoord 2, autoriteit 13%

Je wilt een blokelement met wat CSS ‘shrink-to-fit’-breedte noemt en de specificatie biedt geen gezegende manier om zoiets te krijgen. In CSS2 is shrink-to-fit geen doel, maar een middel om een situatie aan te pakken waarin de browser “moet” een breedte uit het niets halen. Die situaties zijn:

• zweven
• absoluut gepositioneerd element
• inline-blokelement
• tabelelement

wanneer er geen breedte is opgegeven. Ik heb gehoord dat ze eraan denken toe te voegen wat je wilt in CSS3. Voor nu, doe het met een van de bovenstaande.

De beslissing om de functie niet direct beschikbaar te stellen lijkt misschien vreemd, maar er is een goede reden voor. Het is duur. Shrink-to-fit betekent minimaal twee keer formatteren: u kunt pas beginnen met het formatteren van een element als u de breedte kent, en u kunt de breedte niet berekenen zonder de volledige inhoud te doorlopen. Bovendien heb je niet zo vaak een krimpkous nodig als je zou denken. Waarom heb je extra div rond je tafel nodig? Misschien is het bijschrift van de tabel alles wat je nodig hebt.

Antwoord 3, autoriteit 9%

Ik denk dat het gebruik van

display: inline-block; 

zou werken, maar ik ben niet zeker van de browsercompatibiliteit.

Een andere oplossing zou zijn om je divin een andere divte stoppen (als je het blokkeringsgedrag wilt behouden):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

Antwoord 4, autoriteit 9%

display: inline-blockvoegt een extra marge toe aan je element.

Ik zou dit aanraden:

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

Bonus:je kunt dat mooie nieuwe #elementnu ook gemakkelijk centreren door margin: 0 autotoe te voegen.

Antwoord 5, autoriteit 4%

Er zijn twee betere oplossingen

1. display: inline-block;

   OF

2. display: table;

Van deze twee is display:table;beter,omdat display: inline-block;een extra marge toevoegt.

Voor display:inline-block;kunt u de negatieve margemethode gebruiken om de extra spatie te corrigeren

Antwoord 6, autoriteit 3%

Wat voor mij werkt is:

display: table;

in de div. (Getest op Firefoxen Google Chrome).

Antwoord 7, autoriteit 3%

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

Foo Hack – Cross Browser-ondersteuning voor inline- blok Styling (2007-11-19).

Antwoord 8, autoriteit 2%

Ik weet niet in welke context dit zal verschijnen, maar ik denk dat de CSS-stijleigenschap floatofwel leftof rightdit effect zal hebben . Aan de andere kant heeft het ook andere bijwerkingen, zoals het laten zweven van tekst eromheen.

Corrigeer me alstublieft als ik het mis heb, ik weet het niet 100% zeker en kan het momenteel niet zelf testen.

Antwoord 9, autoriteit 2%

Het antwoord op je vraag ligt in de toekomst, mijn vriend …

namelijk “intrinsiek” komt met de laatste CSS3-update

width: intrinsic;

helaas loopt IEhiermee achter, dus het ondersteunt het nog niet

Meer hierover: CSS Intrinsic & Extrinsic Sizing Module Level 3en Kan ik gebruiken?: Intrinsic & Extrinsieke maatvoering.

Voor nu moet je tevreden zijn met <span>of <div>ingesteld op

display: inline-block; 

Antwoord 10

width:1px;
white-space: nowrap;

werkt prima voor mij 🙂

Antwoord 11

Een CSS2-compatibele oplossing is het gebruik van:

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

Je kunt je div ook laten zweven, waardoor deze zo klein mogelijk wordt, maar je moet een clearfixals er iets in je div zweeft:

.my-div
{
    float: left;
}

Antwoord 12

OK,in veel gevallen hoeft u zelfs niets te doen, omdat div standaard heighten widthals automatisch heeft, maar als het niet jouw geval is, zal het toepassen van inline-block-weergave voor jou werken… kijk naar de code die ik voor je maak en het doet wat je zoekt:

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>

div {
    display: inline-flex;
}

div { 
    width: fit-content; 
}

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>

/* Your're working with */
display: inline-block;
/* For IE 7 */
zoom: 1;
*display: inline;
/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

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

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}
div.ex2 {
  width: max-content;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>
</body>
</html>

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

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.

width: -moz-fit-content;

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

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{
width:fit-content;
}

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

display: table;

display: inline-block; 

div{
  width:auto;
  height:auto;
}

   .outer{
          width:fit-content;   
          display: flex;
          align-items: center;
    }
    .outer .content{
         width: 100%;
    }
<div class=outer>
    <div class=content>
       Add your content here
    </div>
</div>