Pytanie Jak zrobić div nie większy niż jego zawartość?


Mam układ podobny do:

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

Chciałbym div aby rozszerzyć się tylko do tak szerokiego jak mój table staje się.


1693
2018-01-16 16:03


pochodzenie


efekt nazywa się "zawijaniem w folię", a w odpowiedzi na kilka sposobów (float, inline, min / max-width), z których wszystkie mają efekty uboczne do wyboru - annakata


Odpowiedzi:


Rozwiązaniem jest ustawienie swojego div do display: inline-block.


2040
2017-10-12 16:47



@ leif81 Możesz użyć a span lub div lub ul lub cokolwiek innego, ważną częścią jest to, że kontener, który ma być minimalną szerokością, ma właściwość CSS display: inline-block - miahelf
jeśli ktoś się zastanawia: można wtedy wyśrodkować rodzica tabeli, ustawiając "text-align: center" na jego rodzica i "text-align: left" na nim (np. <body style = "text-align: center"> < span style = "text-align: left; display: inline-block;"> <table> ... </ table> </ span> </ body>) - bernstein
To nie działa na chrome dla mnie z rozpiętością, ale działa przy użyciu white-space: nowrap; - albanx
Pamiętaj, że gdy już to zrobisz display: inline-block Właściwość ustaw margin: 0 auto; nie będzie działać zgodnie z oczekiwaniami. W takim przypadku, jeśli kontener macierzysty ma text-align: center; a później inline-block element będzie poziomo wyśrodkowany. - Savas Vedova
inline-block NIE działa dla mnie, ale inline-flexZROBIŁ. - mareoraft


Chcesz element blokowy, który ma to, co CSS nazywa zmniejszeniem do szerokości pasowania, a specyfikacja nie zapewnia błogosławionego sposobu na uzyskanie takiej rzeczy. W CSS2, shrink-to-fit nie jest celem, ale oznacza radzenie sobie z sytuacją, w której przeglądarka "musi" uzyskać szerokość z cienkiego powietrza. Te sytuacje to:

  • pływak
  • absolutnie pozycjonowany element
  • element inline-block
  • element tabeli

gdy nie określono żadnej szerokości. Słyszałem, że myślą o dodaniu tego, co chcesz w CSS3. Póki co, rób to z jednym z powyższych.

Decyzja o nieprzekazywaniu tej funkcji bezpośrednio może wydawać się dziwna, ale nie bez powodu. To jest drogie. Skurcz do dopasowywania oznacza co najmniej dwukrotne formatowanie: nie można rozpocząć formatowania elementu, dopóki nie pozna się jego szerokości i nie można obliczyć szerokości bez przechodzenia przez całą zawartość. Poza tym nie trzeba mieć elementu dopasowującego się do kształtu, tak często, jak można by sądzić. Dlaczego potrzebujesz dodatkowego div przy swoim stole? Może podpis na stole to wszystko, czego potrzebujesz.


308
2018-01-16 16:40



powiedziałbym inline-block jest właśnie do tego przeznaczony i doskonale rozwiązuje problem. - miahelf
myślę, że dodają css4 i będzie content-box, max-content, min-content, available, fit-content, auto - Muhammad Umer
Nowa fit-content słowo kluczowe (nie istnieje, gdy ta odpowiedź została po raz pierwszy napisana, i nadal) nie w pełni obsługiwane) pozwala wyraźnie zastosować wymiar "obkurcz do dopasowywania" do elementu, co eliminuje potrzebę sugerowania jakichkolwiek hacków, jeśli masz na tyle szczęścia, że ​​kierujesz reklamy wyłącznie do przeglądarek z obsługą. +1 mimo wszystko; te są na razie przydatne! - Mark Amery
float zrobiłem to, co musiałem zrobić! - nipunasudha


Myślę, że używam

display: inline-block;

będzie działać, jednak nie jestem pewien co do kompatybilności przeglądarki.


Innym rozwiązaniem byłoby owinięcie twojego div winnym div (jeśli chcesz zachować zachowanie blokowe):

HTML:

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

CSS:

.yourdiv
{
    display: inline;
}

196
2018-01-16 16:41



Aby odpowiedzieć na pytanie dotyczące zgodności przeglądarki: nie będzie działać z IE7 / 8 na elementach DIV. Musisz używać elementów SPAN. - Matt Brock
@feeela - zawsze umieszczam * przed zoomem, np. *display: inline; *zoom: 1;. Nie testowałem tej konkretnej sytuacji, ale zawsze stwierdzałem w przeszłości, że włamanie hasLayout jest wymagane tylko dla IE7 lub IE8 w trybie IE7 (lub IE8 w dziwactwach!). - robocat
@robocat Tak, rzeczywiście jest to obejście inline-block włączony w IE 7. - feeela
@feela - twój komentarz nie ma dla mnie sensu! Sugerowałam umieszczanie * przed zoomem, a mianowicie. * zoom: 1; - robocat
Proszę wyjaśnić, dlaczego działa blok wbudowany. - HelloWorldNoMore


display: inline-block dodaje dodatkowy margines do twojego elementu.

Polecam to:

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

180
2018-05-12 23:39



+1 - To najlepsze i najczystsze rozwiązanie dla nowoczesnych przeglądarek, które pozwala również na centrowanie elementu. Komentarz warunkowy z position: absolute jest konieczne dla <IE8. - uınbɐɥs
Określanie display: inline-block nie dodaje żadnych marginesów. Ale CSS obsługuje odstępy między elementami śródliniowymi. - feeela
Proszę wyjaśnić, dlaczego twoje rozwiązanie wyświetlania: tabela działa. - HelloWorldNoMore
inline-block uniemożliwia umieszczenie elementu w jego obiekcie nadrzędnym (np. jeśli istnieje wyrównanie tekstu: centrum nie można ustawić w lewo): tabela jest idealna :) - FlorianB
To jest droga, którą możesz iść, jeśli masz position: absolute - m4heshd


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

Foo Hack - Obsługa krzyżowej przeglądarki dla wbudowanego blokowania stylów (2007-11-19).


82
2017-08-25 19:36



Każdy, kto ma ten problem, powinien dodać wszystkie te style. Firefox dodał marginesy, gdy nie są używane -moz-inline-stack - Justin


To, co działa dla mnie to:

display: table;

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


74
2018-01-11 12:01



Tak, zwłaszcza jeśli potrzebujesz wyśrodkować z marginesem: auto. Ten blok inline nie jest rozwiązaniem. - Zsolt Szatmari
Zauważ też, że jeśli chcesz dopełniać wewnątrz tego elementu, musisz ustawić border-collapse: separate; styl. Jest to ustawienie domyślne w wielu przeglądarkach, ale często css frameworków takich jak bootstrap resetujący wartość do collapse. - djxak
Testowany w MSIE 6 na telefonie z Windows Mobile 6.5 wyprodukowanym w 2009 roku: z gracją ulega degradacji do rozmiaru div o pełnej szerokości (co nie powinno być problemem w telefonie). Jeśli ktoś używa wersji Internet Explorer mniejszej niż 8 na pulpicie, korzysta z nieobsługiwanego systemu operacyjnego (IE6 pochodzi z XP, IE7 pochodzi z Vistą); Przekieruję ich na stronę informującą, że powinni przejść na GNU / Linux, jeśli chcą dalej bezpiecznie korzystać z Internetu na tym komputerze. - Silas S. Brown


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

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

61
2018-05-27 00:41



Które nie jest obsługiwane w IE caniuse.com/#search=fit-content :( - Bartek Skwira
@BartlomiejSkwira Dowolny zamiennik działający w IE lub Eclipse? inne rozwiązanie jako blok inline nie działa dla mnie .. \ - DAVIDBALAS1
To ma zbyt wiele sensu, oczywiście brakuje mu wsparcia. - Sava B.


Istnieją dwa lepsze rozwiązania

  1. display: inline-block;

    LUB

  2. display: table;

Z tych dwóch display:table; jest lepiej. 

Dla display:inline-block; możesz użyć metody ujemnego marginesu, aby naprawić dodatkową przestrzeń


53
2018-05-10 20:16



Czy możesz wyjaśnić dlaczego? display:table jest lepiej? - Nathaniel Ford
Aby wyświetlić: blok inline, musisz użyć metody ujemnego marginesu, aby ustalić dodatkowe odstępy. - Shuvo Habib
@ NatanielFord, display:table pozostawia element w kontekście formatowania bloku, aby można było jak zwykle kontrolować jego położenie z marginesami itp. display:-inline-*Z drugiej strony, umieszcza element w kontekście formatowania Inline, powodując, że przeglądarka tworzy anonimowe otoczenie bloku wokół niego, zawierające pole liniowe z odziedziczonymi ustawieniami czcionek / wysokości linii i wstawia blok do tego pola liniowego (wyrównanie pionowo w linii bazowej). To wymaga więcej "magii", a zatem potencjalnych niespodzianek. - Ilya Streltsyn