Szerokość div z pozycją absolutną zależy od szerokości jego rodzica?

Chciałbym mieć szerokość elementu div z pozycją bezwzględną w zależności od jego zawartości, a nie nadrzędnej. Na przykład,Szerokość div z pozycją absolutną zależy od szerokości jego rodzica?

<div style="position:absolute"> 
<div style="position:absolute"> 
    <div style="position:absolute">Div in Div</div> 
</div> 
</div>

spowoduje zawijany jak pokazano na http://jsfiddle.net/ymgfN/2/

Wygląda szerokości śródmiejskiego div będzie zależała od szerokości jego rodzica, choć jego pozycja jest absolutna. Na przykład, jeśli określimy szerokość na rodzica, to będzie działać zgodnie z oczekiwaniami (bez zawijania słów): http://jsfiddle.net/ymgfN/3/

Niestety, nie mogę określić szerokości rodzica z góry - w końcu będę mieć jego szerokość zależną od jego dzieci. I muszę użyć pozycji absolutnej. Czy to możliwe w czystym CSS?

Niektóre tła: Nie próbuję zrobić stronę do spełnienia jakąś konstrukcję - Wiem, że jest szalony, aby mieć trzy ułożone absolutną pozycję dla każdego rozsądnego zapotrzebowania. Raczej robię eksperyment, aby sprawdzić, czy pozycjonowanie absolutne może być ogólnym podejściem do rozwiązania szeregu problemów z układem (wszechstronny skomplikowany układ, który zwykle wymaga sprytnego użycia statycznego/absolutnego/zmiennoprzecinkowego). Niestety, natknąłem się na ten problem, który sprawi, że pomysł wykorzystania bezwzględnej pozycji wszędzie głupi.

Źródło

2012-03-16 Tom Yeh

Jeżeli określić szerokość na jego elementem dziecko wtedy rodzic będzie dostosować do szerokości elementu dziecko. Nie jestem pewien, czy tego właśnie szukasz! ... – iDroid

Element dostaje swoją szerokość i wysokość przed zostaje usunięty z przepływu dokumentu. Gdy umieścisz element zewnętrzny absolutnie, zostanie on usunięty z przepływu, a ponieważ nie ma on bezpośredniej treści, ma szerokość 0 i wysokość 0. Dlatego inny element podziału w środku, który próbuje dodać tekst, dziedziczy szerokość jednostki równą 0 Więc rozszerza się tylko do szerokości najdłuższego słowa, aby pozwolić na treść, a następnie rozbić wszystko na nowe. Po wykonaniu usuwa element z przepływu dokumentu, który ma być wyłączony.

Aby odpowiedzieć na pierwsze pytanie, tak, element pozycjonowany bezwzględnie zwraca uwagę na wymiary elementu nadrzędnego, jeśli nie określa się szerokości i/lub wysokości samego elementu. Czy wiesz, jaka powinna być szerokość Twoich dzieci?

Jeśli chodzi o drugie pytanie ... możesz użyć white-space: nowrap. Naprawdę nie świetne rozwiązanie. Bardziej korzystnie znajdź lepszy sposób uporządkowania swoich treści, aby nie potrzebować trzech absolutnie rozmieszczonych elementów zagnieżdżonych w sobie. Mówisz, że masz mieć, aby z nich korzystać ... Naprawdę? Bardziej prawdopodobne jest, że nie znalazłeś lepszego sposobu na zrobienie tego, ale to jest dla innego pytania, jeśli zdecydujesz się pójść tą drogą.

Źródło

2012-03-16 05:15:42 animuson

Tak, biała przestrzeń zapobiega zawijaniu słów, ale czy można ją zawijać tylko wtedy, gdy ekran (tj. Ciało) nie może jej pomieścić? To znaczy, aby efekt był taki, jak gdyby ustawiono szerokość rodzica na 100% (chociaż tak naprawdę nie ustawiamy, a raczej ustawiamy właściwość CSS na dziecko)? –

@tomyeh: Jedyny sposób, w jaki mogę teraz myśleć to ustawienie 'left: 0; right: 0' na elementach, a następnie usuwając właściwość 'right' za każdym razem, gdy ustawisz na niej szerokość. – animuson

+1. Szukał wyjaśnień (dotyczących [tego wątku] (http://stackoverflow.com/questions/24713900/the-a-tag-content-goes-to-a-new-line/24714269#24714269)) na temat szerokości dzieci o absolutnie pozycjonowanych elementach i nie znalazłem ich. Zajęło mi dużo czasu, zanim natknąłem się na to. Zastanawiam się, dlaczego nie wyszły wyżej w wyszukiwaniu. Czy odpowiedź musi zostać zaakceptowana? – Harry

Element blokowy z position: absolute lub fixed jest automatycznie powiązany z szerokością rodzica, jeśli nie jest ustalony width. Jeśli nie chcesz mieć stałej szerokości elementu podrzędnego, możesz skutecznie obejść ten problem, nadając mu bardzo wysoką wartość: margin-right, np.

.inner-div { 
    position: absolute; 
    margin-right: -10000px; 
}

Wtedy szerokość będzie związana z szerokością jednostki nadrzędnej minus margines ujemny, więc w praktyce zależy tylko od jej zawartości.

aktualizowane skrzypce: http://jsfiddle.net/ymgfN/53/

Źródło

2015-11-18 17:45:40

Szerokość div z pozycją absolutną zależy od szerokości jego rodzica?

Odpowiedz

Powiązane problemy