Względny rodzic DIV dziedziczy szerokość bezwzględnego dziecka DIV

Próbuję ustawić DIV dziecka na dnie rodzica DIV, ale chciałbym również, aby zawartość DIV dziecka pomagała dyktować wymiary rodzica DIV . Jak mam to teraz, dziecko DIV nie wpływa na szerokość/wysokość rodzicielskiego DIV.Względny rodzic DIV dziedziczy szerokość bezwzględnego dziecka DIV

Oto przykład z mojego kodu HTML/CSS:

// kod HTML:

<div id="parent"> 
    <h3>Top Aligned Title</h3> 
    <div id="child"></div> 
</div>

// kod CSS:

#parent { 
    background-color:#222; 
    position: relative; 
    height: 500px; 
} 
#child { 
    background-color:#444; 
    position: absolute; 
    bottom: 0px; 
    width: 100px; 
    height: 200px; 
}

Co muszę zrobić osiągnąć to, co próbuję zrobić? Mogłem zrezygnować z bezwzględnych/względnych reguł CSS i po prostu utworzyć tabelę w rodzimym DIV, co pozwoliłoby mi osiągnąć zarówno dolne wyrównanie, jak i zawartość, która dyktuje wymiary rodzica.

Chciałbym jednak wiedzieć, czy istnieje sposób, aby to zrobić w CSS i bez konieczności ustawiania szerokości rodzica DIV.

z góry dzięki!

Źródło

2013-02-12 jaxim

to znaczy, że w mrówka #parent, aby odebrać szerokość od #child, a więc mieć szerokość 100 pikseli? Id więc ustaw twój #parent div ": inline-block" i sprawdź, czy to jest to, o co prosisz. –

Tak. Chociaż szerokość potomka DIV w tym przykładzie jest określona w CSS, szerokość w moim rzeczywistym projekcie jest dyktowana dynamicznie w kodzie JS. – jaxim

Tego rodzaju rzeczy? http://jsfiddle.net/Avww9/ –

Krótka odpowiedź brzmi, że to, o co w zasadzie pytasz, nie może zostać wykonane przy użyciu czystego CSS/HTML. (przynajmniej bez tabel) Potrzebujesz JavaScript, który odczytałby # szerokość/wysokość dziecka, a następnie wykonaj obliczenia, które chcesz wykonać (nie wiem) i ustaw nową wysokość/szerokość na #parent.

Jeśli masz na myśli to, że chcesz zmienić wysokość i szerokość # dziecka zgodnie z jego treścią, oczywiście jest to natywny CSS, ustaw jego wysokość/szerokość na auto, a następnie zacznij dodawać tekst do środka, zobaczysz zacznie rosnąć, dopasowując się do twoich treści w środku.

Ponieważ #child jest pozycjonowany jako bezwzględny, wówczas jest pobierany z normalnego przepływu dokumentu, dlatego nie ma wpływu na #parent.

Źródło

2013-02-12 15:20:56

Tego właśnie się obawiałem. Sądzę, że mogę ustawić dynamicznie szerokość rodzica DIV, gdy tylko poznam zawartość DIV dziecka. Ewentualnie mogę użyć tagu table, great-standby do szybkiego wykonywania zadań w HTML. – jaxim

Cóż, jeśli naprawdę o tym myślisz, twój projekt ma za sobą pewną "logikę", więc - przynajmniej na razie -, JS (jQuery) jest drogą do zrobienia. –

Dzięki nowoczesnym CSS jest to możliwe.

HTML:

<div id="parent"> 
    <h3>Top Aligned Title</h3> 
    <div id="child"> 
     <p>CHILD ELEMENT</p> 
    </div> 
</div>

CSS:

#parent { 
    background:red; 
    height: 500px; 
    position:relative; 
} 
#child { 
    background:green; 
    position: absolute; 
    top:100%; 
    -webkit-transform: translateY(-100%); 
    -ms-transform: translateY(-100%); 
    transform: translateY(-100%); 
    width: 100px; 
}

http://jsfiddle.net/Bushwazi/bpe5s6x3/

transform:translateY(-100%); jest podstęp. Jego matematyka jest oparta na element 's box-model.
Można również połączyć top:50%; z transform:translateY(-50%);, aby wyśrodkować.
Możesz zamienić top dla left i translateY dla translateX, aby ustawić element w poziomie.

Źródło

2015-06-23 15:18:40

Tu idziesz

HTML:

<main id="parent"> 
    <div class="popup">Top Aligned Title 
    <div class="content"> 
     Content 
    </div> 
    </div> 
</main>

CSS:

#parent { 
    width: 120px; 
} 

.popup { 
    position: relative; 
    margin-top: 48px; 
} 

.content { 
    left: 0; 
    position: absolute; 
    background: green; 
    width: 100%; 
}

http://jsfiddle.net/8L9votay/

Źródło

2016-07-29 06:52:30

Względny rodzic DIV dziedziczy szerokość bezwzględnego dziecka DIV

Odpowiedz

Powiązane problemy