Umieść element DIV pod innym numerem DIV

Otrzymałem dwa elementy DIV, z których jeden ma pozycję absolutną (lewy dolny róg głównego DIV). Drugi DIV jest ukryty i wyświetlany tylko przez kliknięcie łącza.Umieść element DIV pod innym numerem DIV

Potrzebuję, aby drugi pojawił się tuż pod pierwszym. Ale ponieważ pierwsza pozycja div jest absolutna, druga pojawia się na pierwszej.

HTML kod:

<div class ="main-div"> 
     <div class = "wrapper"> 
     <div class ="first-div"> 
     <a href ="blah"> <span>my link</span> </a> 
     //this is absolute positioned 
     </div> 
    <div class ="second-div"> 
     //this only appears after clicking on a link 
     <form> 
      <textarea> 
      </textarea> 
     </form> 
    </div> 
    </div> 
</div>

CSS:

div.wrapper { 
    width:inherit; 
    float:left; 
    bottom:6px; 
    position:absolute; 
    padding: 0 0 0 0; 
    overflow: auto; 
    } 

    div.second-div { 
     padding-top: 2px 
    } 

    div.main-div{ 
     background:{colour} url({image}) no-repeat 0 100%; 
    width:557px; 
    padding:8px 13px 4px 13px; 
    min-height:61px; 
    position:relative; 
}

Dzięki z góry za wszelką pomoc.

Źródło

2009-12-15 fireBand

Czy możesz wybrać sekcje "kodu" swojego pytania, aby był on łatwiejszy do odczytania? – Michael

Myślę, że rozwiązanie wymaga następujących czynności. Masz opakowanie div:

<div id="my_wrapper"> 
    content 
</div>

Niech ten element div zostanie całkowicie ustawiony. Następnie wewnątrz tego div masz dwa divy, twój widoczny div i ten, który musi "stać się" widoczny.

<div id="my_wrapper"> 
    <div id="visible_item">Item</div> 
    <div id="may_become_visible">Not Visible Now Item</div> 
</div>

Następnie można pokazać/ukryć w razie potrzeby i prawidłowo ułożyć zawartość wewnętrzną.

Źródło

2009-12-15 18:12:13 Michael

To jest dobry pomysł. Sugeruję, żeby spróbował tego pierwszy. –

Próbowałem tego rozwiązania, ale muszę poćwiczyć. "Opakowujący" element div musi rozwinąć się dla niewidocznego elementu div, który zawiera element formularza. Ale z powodu swojej absolutnej pozycji tekst w formularzu rozszerza się w górę i jest tylko w połowie widoczny. Potrzebuję ustawić pierwszy-div w lewym dolnym rogu głównego-div (gdy drugi-div jest ukryty), a drugi-div powinien pojawić się na dole pierwszego-div. Czy jest to możliwe przy względnym ustawieniu? – fireBand

Nie ustawiaj określonej wysokości na zewnętrznym elemencie div, pozwól mu dopasować się do wysokości w zależności od potrzeb na zawartość. – Michael

Tylko zgadnij, ale czy próbowałeś dodać styl jasny: zarówno do drugiego div? Wątpię, czy to pomoże, ale może.

Możesz również spróbować dodać górny margines dla drugiego elementu div, który jest równy wysokości pierwszego elementu div. Zasadniczo coś takiego:

<div id="second-div" style="padding-top: 40px">

Gdzie 40 pikseli jest wysokością pierwszego div. Problem polega na tym, że musisz wiedzieć, jaka jest wysokość pierwszego elementu div, a jeśli jest zmienna, to takie podejście nie pomoże.

Źródło

2009-12-15 18:03:47

dziękuję za odpowiedź, że to nie działa. Drugi-div pojawia się na dole, ale na górze pierwszego div, który przesuwa się wraz z nim na dół. – fireBand

Czy próbowałeś zwiększyć górne wypełnienie z 40 pikseli.Upewnij się również, że górne wypełnienie znajduje się na drugim dziale, a nie na opakowaniu/głównym elemencie div. –

Połączyłem oba rozwiązania, ale wciąż widać tylko połowę "opakowania-div". Znalazłem problem jednak. "Opakowanie" div rozszerza się, ale w górę przekracza granice "głównego div". Myślę, że skoro pozycja jest absolutna, działa niezależnie od pozycji "głównego diva". Ponieważ "główny-div" nie rozwija się odpowiednio, tylko połowa "opakowania" div może być widoczna. Edytowałem mój wpis z nowymi elementami. – fireBand

Ok, z aktualizowania pytanie wierzę Utworzyliśmy co szukasz z następujących czynności:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<body> 
    <style> 
     HTML 
     { 
      margin: 0px; 
      padding: 0px; 
      height: 100%; 
     } 

     BODY 
     { 
      margin: 0px; 
      padding: 0px; 
      height: 100%; 
     } 

     div.first-div 
     { 
      width: inherit; 
      float: left; 
      bottom: 60px; 
      position: absolute; 
      padding: 0 0 0 0; 
      overflow: auto; 
     } 

     div.second-div 
     { 
      display: none; 
      position: absolute; 
      float: left; 
      bottom: 0px; 
     } 
     div.main-div 
     {  
      background:{colour} url({image}) no-repeat 0 100%; 
      width:557px; 
      min-height:61px; 
      position:relative; 
      float: left; 
      height: 100%; 
     } 
    </style> 
    <div class="main-div"> 
     <div id="firDiv" class="first-div"> 
      <a href="#" onClick="document.getElementById('secDiv').style.display='block';"><span>my link</span></a> 
      //this is absolute positioned 
     </div> 
     <div id="secDiv" class="second-div"> 
      //this only appears after clicking on a link 
      <form> 
       <textarea></textarea> 
      </form> 
     </div> 
     this is my content 
    </div> 
</body> 
</html>

Teraz, co to robi to bezwzględne położenie obu pierwszych i drugich div na dole strony, tak aby się nie nakładały. Jeśli nie podoba się fakt, że pierwszy div jest tak wysoko od dołu strony, można zmodyfikować styl pierwszego div jako takie:

div.first-div 
{ 
    width: inherit; 
    float: left; 
    bottom: 20px; 
    position: absolute; 
    padding: 0 0 0 0; 
    overflow: auto; 
}

a następnie zaktualizować link

<a href="#" onClick="document.getElementById('secDiv').style.display='block';document.getElementById('firDiv').style.bottom='60px';"><span>my link</span></a>

Zasadniczo to, co tu robisz, zmienia pierwszy element div, który jest bliżej dolnej części strony, a następnie przesuwa go po kliknięciu łącza, aby uzyskać więcej miejsca dla drugiego elementu div.

Nie rozwiązuje podstawowego problemu wyświetlania relatywnej pozycji div pod pozycjonowaniem absolutnie div, ale miejmy nadzieję, że rozwiązuje określony problem.

Źródło

2009-12-15 23:31:13

Umieść element DIV pod innym numerem DIV

Odpowiedz

Powiązane problemy