Dwa nakładające się nakładki o zmiennej wysokości = bez wysokości na kontenerze

Jest całkiem łatwo zrobić dwa nakładające się na siebie div, gdy rozmiar div kontenera jest znany, ale co, jeśli div div nie może?Dwa nakładające się nakładki o zmiennej wysokości = bez wysokości na kontenerze

Próbowałem to zrobić bez manipulowania wysokość pojemnika: http://jsfiddle.net/AJfAV/ Ale #text2 przejść #text3 a nie „push” go. Jak zmienić rozmiar automatycznie #container?

udaje mi się osiągnąć mój cel przy użyciu jQuery UI, ale czuję, że to nie jest eleganckie rozwiązanie: http://jsfiddle.net/AJfAV/6/

Źródło

2013-05-09 user1707414

jest to problemem, jeśli #container definiuje ma stałą szerokość ?? –

Czy to, co trzeba?

Updated fiddle:

mam ustawienie height do domyślnego, auto, jQuery, tak:

$("#container").css("height", "auto");

Można również ustawić: height: auto; w CSS.

Źródło

2013-05-09 15:44:49 flavian

To nie działa. Przynajmniej tak, jak się spodziewałem. – user1707414

Dodałem rozwiązanie dokładnie pokazujące, czego się spodziewałem, ale jestem zaskoczony, że wysokość kontenera musi zostać naprawiona http://jsfiddle.net/AJfAV/5/. W twoim rozwiązaniu/skrzypce, "text3: Powinno pojawić się poniżej tekstu1, a tekst2" nie pojawia się pod tekstem1. – user1707414

Czy potrzebujesz pozycji: absolutna? Możesz użyć pozycjonowania absolutnego, jeśli nie chcesz robić żadnych aranżacji, ale miejsce docelowe. Pozycjonowanie absolutne pobiera element całkowicie z przepływu elementów. Nie wiedzą nic o jego istnieniu.

Możesz używać pływaków i techniki do otaczania pływaków. Używam wyczyść:

.cl-left { 
    clear: left; 
    height: .1px; 
    font-size: 0; 
    line-height: 0; 
}

Nie zapomnij dodać <div class="cl-left"> </div>.

Ponadto stosowany jest ujemny margines. Dlatego # text2 jest przybity na prawo.

http://jsfiddle.net/AJfAV/7/

Źródło

2013-05-09 19:26:58 Salomonder

Rzeczywiście nie potrzebuję absolutu. Chciałbym utrzymać przepływ elementów takimi, jakimi są, ale nie jestem w stanie znaleźć rozwiązania bez pozycji: absolutna. – user1707414

Można używać wartości pływających, ale tabele css nie będą działać, ponieważ wpływ na właściwość wyświetlania ma zanikanie. Ponadto marginesy nie mają zastosowania do komórek tabeli. – Salomonder

Czy źle zrozumiałem? – Salomonder

ten można rozwiązać, gdyby usunąć bezwzględnego położenia #text1 i #text2.

i uczynić #text2 pokrywają #text1 dokonując zarówno float:left i ustaw margin-left:-30px dla #text2.

teraz niech go przetestować: http://jsfiddle.net/RPe4H/

problemem teraz jest to, że kiedy #text1 jest przełączana, #text2 będzie unosić się do góry po lewej stronie #container, to dzieje, ponieważ JQuery ustawić display:none na elemencie Podczas przełączania jest wykonywana.

teraz, aby rozwiązać ten problem, umieścić # text1 i # Text2 wewnątrz pojemników z tej samej szerokości, więc #text nie wpływa na przepływ, gdy jest on ustawiony na display:none, również należy ustawić min-height:1px na pojemniku #text1.

teraz działa zgodnie z oczekiwaniami http://jsfiddle.net/MyyF6/1/

Źródło

2013-05-09 22:45:04

Dwa nakładające się nakładki o zmiennej wysokości = bez wysokości na kontenerze

Odpowiedz

Powiązane problemy