Jak mogę utworzyć div nie większy niż jego zawartość?

Mam układ podobny do:

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

Chciałbym, divaby rozszerzyło się tylko na tak szerokie, jak się tablestaje.

Rozwiązaniem jest ustawienie divna display: inline-block.

Chcesz elementu blokowego, który ma to, co CSS nazywa kurczącą się, aby dopasować szerokość, a specyfikacja nie zapewnia błogosławionego sposobu na uzyskanie takiej rzeczy. W CSS2 dopasowanie do kurczenia się nie jest celem, ale oznacza radzenie sobie z sytuacją, w której przeglądarka „musi” uzyskać szerokość powietrza. Te sytuacje to:

• pływak
• element absolutnie pozycjonowany
• element blokowy
• element stołu

gdy nie określono szerokości. Słyszałem, że myślą o dodaniu tego, co chcesz w CSS3. Na razie skorzystaj z jednego z powyższych.

Decyzja, aby nie ujawniać funkcji bezpośrednio, może wydawać się dziwna, ale jest dobry powód. To jest drogie. Zmniejsz dopasuj oznacza formatowanie co najmniej dwa razy: nie możesz rozpocząć formatowania elementu, dopóki nie poznasz jego szerokości i nie możesz obliczyć szerokości bez przejścia przez całą zawartość. Co więcej, nie trzeba elementu kurczliwego dopasowywać tak często, jak mogłoby się wydawać. Dlaczego potrzebujesz dodatkowego diva przy stole? Może podpis tabeli jest wszystkim, czego potrzebujesz.

Myślę, że za pomocą

display: inline-block;

działałoby, jednak nie jestem pewien kompatybilności przeglądarki.

Innym rozwiązaniem byłoby zawinięcie divw inne div(jeśli chcesz zachować zachowanie bloku):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

display: inline-block dodaje dodatkowy margines do elementu.

Poleciłbym to:

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

Bonus: Możesz teraz z łatwością wyśrodkować ten wymyślny nowy #element, dodając go margin: 0 auto.

Możesz spróbować fit-content(CSS3):

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

• Obsługa przeglądarki
• Specyfikacja

Dla mnie działa:

display: table;

w div. (Testowany na Firefox i Google Chrome ).

Istnieją dwa lepsze rozwiązania

1. display: inline-block;

   LUB

2. display: table;

Z tych dwóch display:table;jest lepiej, ponieważ display: inline-block;dodaje dodatkowy margines.

Dla display:inline-block;można użyć metody ujemny margines, aby ustalić dodatkową przestrzeń

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

Foo Hack - obsługa wielu przeglądarek dla stylizacji wbudowanej (2007-11-19) .

Nie wiedząc w jakim kontekście to pojawi się, ale wierzę, że właściwość CSS stylu floatalbo leftczy rightbędzie miał ten efekt. Z drugiej strony będzie miał również inne skutki uboczne, takie jak narzucanie tekstu.

Jeśli jednak się mylę, popraw mnie, nie jestem w 100% pewien i obecnie nie mogę tego samodzielnie przetestować.

Odpowiedź na twoje pytanie leży w przyszłości, mój przyjacielu ...

mianowicie „intrinsic” nadchodzi z najnowszą aktualizacją CSS3

width: intrinsic;

niestety IE jest opóźniony, więc jeszcze go nie obsługuje

Więcej informacji na ten temat: CSS Intrinsic & Extrinsic Sizing Module Level 3 and Can I Use? : Wymiarowanie wewnętrzne i zewnętrzne .

Na razie musisz być zadowolony <span>lub <div>ustawiony na

display: inline-block;

Rozwiązaniem kompatybilnym z CSS2 jest użycie:

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

Możesz również unosić swój div, który zmusi go do jak najmniejszego, ale musisz użyć poprawki, jeśli coś w twoim div się unosi:

.my-div
{
    float: left;
}

width:1px;
white-space: nowrap;

działa dobrze dla mnie :)

OK, w wielu przypadkach nawet nie musisz nic robić, jak domyślnie div ma heighti widthjako auto, ale jeśli to nie twoja sprawa, zastosowanie inline-blockwyświetlania będzie dla ciebie działać ... spójrz na kod, który dla ciebie stworzyłem i robi to czego szukasz:

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>

Zostało to wspomniane w komentarzach i trudno znaleźć w jednej z odpowiedzi, więc:

Jeśli używasz display: flexz jakiegokolwiek powodu, możesz zamiast tego użyć:

div {
    display: inline-flex;
}

Jest to również szeroko obsługiwane w różnych przeglądarkach.

Możesz to zrobić po prostu za pomocą display: inline;(lub white-space: nowrap;).

Mam nadzieję, że uznasz to za przydatne.

Możesz używać inline-blockjako @ user473598, ale uważaj na starsze przeglądarki ..

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

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

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

Mozilla w ogóle nie obsługuje wbudowanego bloku, ale ma -moz-inline-stackto mniej więcej to samo

Niektóre inline-blockatrybuty wyświetlania w różnych przeglądarkach : https://css-tricks.com/snippets/css/cross-browser-inline-block/

Niektóre testy z tym atrybutem można zobaczyć w: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Po prostu umieść styl w swoim pliku 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>

Wiem, że ludzie czasem nie lubią stołów, ale muszę wam powiedzieć, że próbowałem hacków inline css, a oni trochę działali w niektórych divach, ale w innych nie, więc naprawdę łatwiej było dołączyć rozszerzającą się div w tabela ... i ... może mieć właściwość inline lub nie, a mimo to tabela może pomieścić całkowitą szerokość zawartości. =)

Działające demo jest tutaj

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

Moje rozwiązanie flexbox CSS3 w dwóch wariantach: jeden na górze zachowuje się jak rozpiętość, a ten na dole zachowuje się jak div, biorąc całą szerokość za pomocą opakowania. Ich klasy to odpowiednio „góra”, „dół” i „bottomwrapper”.

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>

Spowoduje to, że nadrzędna szerokość div będzie taka sama jak największa szerokość elementu.

Spróbować display: inline-block;. Aby był kompatybilny z wieloma przeglądarkami, użyj poniższego kodu 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>

Manipulując przy Firebug, znalazłem wartość właściwości, -moz-fit-contentktóra dokładnie robi to, czego chciał OP, i może być używana następująco:

width: -moz-fit-content;

Chociaż działa tylko w przeglądarce Firefox, nie mogłem znaleźć odpowiednika dla innych przeglądarek, takich jak Chrome.

Możesz wypróbować ten kod. Postępuj zgodnie z kodem w sekcji 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>

Rozwiązałem podobny problem (gdzie nie chciałem używać, display: inline-blockponieważ element był wyśrodkowany), dodając spanznacznik wewnątrz divznacznika i przenosząc formatowanie CSS z zewnętrznego divznacznika na nowy spanznacznik wewnętrzny . Po prostu rzucenie tego jako kolejny alternatywny pomysł, jeśli display: inline blocknie jest dla ciebie odpowiednią odpowiedzią.

Możemy użyć jednego z dwóch sposobów na divelemencie:

display: table;

lub,

display: inline-block; 

Wolę używać display: table;, ponieważ sam obsługuje wszystkie dodatkowe miejsca. Podczas gdy display: inline-blockwymaga dodatkowego mocowania przestrzeni.

div{
  width:auto;
  height:auto;
}

Jeśli masz linie podziału kontenerów, po godzinach szukając dobrego rozwiązania CSS i nie znajdując żadnego, używam teraz 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>

Zmieniono (działa, jeśli masz wiele dzieci): Możesz użyć jQuery (spójrz na link JSFiddle)

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


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

Nie zapomnij dołączyć jQuery ...

Zobacz JSfiddle tutaj

Próbowałem div.classname{display:table-cell;}i zadziałało!