Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Bootstrap3 i warstwy z diwów
Forum PHP.pl > Forum > Przedszkole
elmozaur
Witam.
Proszę o pomoc w czymś takim:
Mam kolumnę z klasa col-md-9. W tym kontenerze chcę zrobić 2 divy 1 nad drugim - tak aby zajmowały 100% wysokości i szerokości.
Pytanie : jak powinien wyglądać css aby div z wyższym z-index moglbyć prawidłowym kontenerem dla kolejnych divów row i col-md ?
aras785
Omg... rozrysuj to bo nie bardzo rozumiem...

  1. <div class="col-md-9">
  2. <div class="row">
  3. <div class="col-md-12">
  4. Jeden
  5. </div>
  6. <div class="col-md-12">
  7. Dwa
  8. </div>
  9. </div>
  10. </div>
elmozaur
faktycznie rysunek wyjaśni to lepiej:
składowe
gotowe

id="kontener" od tego zaczynam. na poczatku ma wielkość 0. Wygooglalem, że aby miał 100% to body, html i row tez muszą mieć 100% wiec jeden problem rozwiązany.
Teraz to co najważniejsze dla mnie:
1) mam pusty kontener div o pewnej wysokości i szerokości (np 400px x 300px)
2) nad nim chcę umieścić inny div też o wielkości 100% i szerokości 100% kontenera (czyli np 400px x 300px to bedzie div o id="back" i jak widac bedzie zawierał jakieś kolumienki)
3) nad dwoma poprzednimi chce trzeci div też o wysokości i szerokości 100% kontenera (to będzie div o id="front" i miejsce gdzie będę dynamicznie tworzył divy z klasą row i col-md-12).

Z czym jest problem: divy które mają być nad kontenerem dałem pozycjonowanie absolutne i top:0px i left:0px;.
Teraz gdy tworze w divie id="front" strukturę
  1. <div class="row">
  2. <div class="col-md-12" id="wiersz1">aaa</div>
  3. </div>


div o id="wiersz1" nie zajmuje całej szerokości kontenera tylko tak jakby 1 kolumnę (dlaczego ? czy to chodzi o pozycjonowanie absolutne ?).

A może jest jakiś inny sposób aby 3 divy umieszczone były 1 nad drugim i miały te same wielkości questionmark.gif?




Odpowiedź : trzeba było przenieść funkcjonalność diva id="back" do diva id="kontener". Usunąć diva back. Zdefiniować ::after dla row tworzonych w divie front i wszystko śmiga wyśmienicie.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.