Vraag Hoe maak ik div niet groter dan de inhoud?


Ik heb een layout die lijkt op:

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

Ik zou graag voor de div om alleen uit te breiden naar zo breed als de mijne table wordt.


1687
2018-01-16 16:03


oorsprong


antwoorden:


De oplossing is om uw div naar display: inline-block.


2033
2017-10-12 16:47



U wilt een blokelement dat CSS heeft dat krimpt om op de juiste breedte te passen en de specificatie biedt geen gezegende manier om zoiets te krijgen. In CSS2 is 'krimpen om te passen' geen doel, maar een manier om om te gaan met een situatie waarin browser 'een breedte uit de lucht' moet krijgen. Die situaties zijn:

  • vlotter
  • absoluut gepositioneerd element
  • inline-blokelement
  • tafel element

wanneer er geen breedte gespecificeerd is. Ik heb gehoord dat ze denken aan het toevoegen van wat je wilt in CSS3. Voor nu, doe het met een van bovenstaande.

De beslissing om de functie niet direct te belichten, lijkt misschien vreemd, maar er is een goede reden voor. Het is duur. Shrink-to-fit betekent minimaal twee keer formatteren: u kunt niet beginnen met het opmaken van een element totdat u de breedte weet en u kunt de breedte niet berekenen zonder hele inhoud te doorlopen. Plus, je hoeft niet zo vaak te krimpen als nodig is, zo vaak als je zou denken. Waarom heb je extra div om je tafel nodig? Misschien is het bijschrift bijschrift alles wat je nodig hebt.


307
2018-01-16 16:40



Ik denk dat gebruiken

display: inline-block;

zou werken, maar ik ben niet zeker van de compatibiliteit van de browser.


Een andere oplossing zou zijn om je in te pakken div in een andere div (als u het blokgedrag wilt behouden):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

196
2018-01-16 16:41



display: inline-block voegt een extra marge toe aan uw element.

Ik zou dit aanbevelen:

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

180
2018-05-12 23:39



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

Foo Hack - Cross-browserondersteuning voor inline-block-styling (2007-11-19).


82
2017-08-25 19:36



Wat voor mij werkt, is:

display: table;

in de div. (Getest op Firefox en Google Chrome).


74
2018-01-11 12:01



Je kan het proberen fit-content (CSS3):

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

60
2018-05-27 00:41



Er zijn twee betere oplossingen

  1. display: inline-block;

    OF

  2. display: table;

Van deze twee display:table; is beter. 

Voor display:inline-block; je kunt de negatieve-marge-methode gebruiken om de extra ruimte te repareren


53
2018-05-10 20:16



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

namelijk "intrinsiek" komt met de nieuwste CSS3-update

width: intrinsic;

helaas D.W.Z is erachter, dus het ondersteunt het nog niet

Meer erover: CSS Intrinsieke en extrinsieke dimensioneringsmodule Niveau 3 en Kan ik gebruiken?: Intrinsieke & extrinsieke dimensionering.

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

display: inline-block;

41
2017-12-11 13:07



Niet wetende in welke context dit zal verschijnen, maar ik geloof dat het een eigenschap in CSS-stijl is float een van beide left of right zal dit effect hebben. Aan de andere kant heeft het ook andere neveneffecten, zoals toestaan ​​dat tekst eromheen zweeft.

Corrigeer me als ik het mis heb, ik ben er niet 100% zeker van en kan het zelf momenteel niet testen.


35
2018-01-16 16:08